wordpress - 按下一步按钮更改变体
问题描述
//buttons
$(document).ready(function() {
$('<div class="select_arow_wrap"><span id="select-up" class="select-up"></span><span id="select-down" class="select-down"></span><div/>').appendTo('td.value:first');
$('<img id="upArrow" src="https://cdn.icon-icons.com/icons2/1182/PNG/512/1490129325-rounded01_82184.png" style="float : right; width: 30px; height: 20px;" />').appendTo('td.value:first');
$('<img id="downArrow" src="https://cdn.icon-icons.com/icons2/1182/PNG/512/1490129347-rounded02_82188.png" style="float : right; width: 30px; margin-left: -30px; height: 20px; margin-top: 20px;" />').appendTo('td.value:first');
});
//action
$(document).ready(function() {
var nextListitem;
var noOfListItems = $("select#pa_couleur > option").length-1;
var curListItem = $("select#pa_couleur")[0].selectedIndex;
$("#upArrow").on("click", function(){
nextListitem = (curListItem-1 < 0) ? noOfListItems : curListItem-1;
curListItem = nextListitem;
$("select#pa_couleur")[0].selectedIndex = nextListitem;
});
$("#downArrow").on("click", function(){
nextListitem = (curListItem+1 > noOfListItems) ? 0 : curListItem+1;
curListItem = nextListitem;
$("select#pa_couleur")[0].selectedIndex = nextListitem;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<td class="label">
<label for="pa_couleur">Color</label>
</td>
<td class="value" data-children-count="1">
<select id="pa_couleur" class="" name="attribute_pa_couleur" data-attribute_name="attribute_pa_couleur" data-show_option_none="yes">
<option value="">Option:</option>
<option value="blue" class="attached enabled">Blue</option>
<option value="grey" class="attached enabled">Grey</option>
</select><div class="select_arow_wrap"><span id="select-up" class="select-up"></span>
<span id="select-down" class="select-down"></span>
<div></div></div><img id="upArrow" src="https://cdn.icon-icons.com/icons2/1182/PNG/512/1490129325-rounded01_82184.png" style="float : right; width: 30px; height: 20px;">
<img id="downArrow" src="https://cdn.icon-icons.com/icons2/1182/PNG/512/1490129347-rounded02_82188.png" style="float : right; width: 30px; margin-left: -30px; height: 20px; margin-top: 20px;">
</td>
</tr>
如何通过单击“下一步”(和“之前”)按钮来更改产品页面的变体?要将下拉列表更改为通过单击此按钮选择的一个显示变体的字段?像这样的东西,但变化。也许你有什么想法
解决方案
推荐阅读
- python - 错误消息:“ExponentialDecay”和“int”实例之间不支持“<”
- java - 使用范围报告将 java 机器人屏幕截图保存到 testng 侦听器中
- r - 使用 R 中最接近的较低值合并两个数据帧
- python-3.x - 使用字符串组合转义反斜杠
- vim - 如何从vim中的行中拆分前2列?
- r - 如何从 R Markdown 文档生成 PDF 标题页
- python - 对 arr[-1] 的困惑以及反向的作用
- node.js - 如何解决“节点不被识别为内部或外部命令等”
- node.js - Heroku 错误节点,mongo,react(错误 R10(启动超时)-> Web 进程未能在启动后 60 秒内绑定到 $PORT)
- datastage - 如何捕获文件中的最后一条记录