Блог

Главная - Вопросы по программированию - Измените варианты с помощью кнопки далее

Измените варианты с помощью кнопки далее

#wordpress #woocommerce

#wordpress #woocommerce

Вопрос:

 //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>

Как можно изменить варианты страницы продукта, нажав на кнопку «Далее» (и «до»)? Чтобы изменить выпадающий список на поле одного отображаемого варианта, который выбирается нажатием на эту кнопку? Что-то вроде этого, но для вариантов. Может быть, у вас есть какие-либо идеи

Комментарии:

1. приведите пример кода, который вы хотите… что вы имеете в виду, говоря «варианты»??

2. Извините, есть «варианты продукта», а не варианты

3. вы пытались использовать ту же логику js, но используя список как массив и отображение значения в текстовом поле?

4. Основная проблема заключается в корзине: даже если варианты выбраны, корзина не активна

5. Используя список в виде массива и значения в текстовом поле, но значение получит ту же проблему: нет возможности снова добавить в корзину, пример с кнопкой количества показывает это