Question

我有这个代码，它允许我选择当天的数量，当我点击添加到购物车然后回到用餐时，我仍然可以看到我的数量，但是你可以看到我有不同的用餐选择，有没有办法使数量与ID一致？如果我的牛肉数量是2 2 1，然后我回去点击鸡肉，它将从我用于该膳食选项的数量开始？

<span> 
            <span class= "prices">
            $15.00 - $17.00         </span>
                    <div class="price-options">  

                    <span id = "price_option-1101" class="none prices">$15.00</span>



            </div>
                        <div class="price-options">  

                    <span id = "price_option-1102" class="none prices">$16.00</span>



            </div>
                        <div class="price-options">  

                    <span id = "price_option-1103" class="none prices">$17.00</span>



            </div>




           <br>
            </span>
            <button price=15 label_option= 1101 class="view1 white cbtn1 open_sansbold option protein-option">Tofu <span id="price-difference-for-1101"></span></button><button price=16 label_option= 1102 class="view1 white cbtn1 open_sansbold option protein-option">Chicken <span id="price-difference-for-1102"></span></button><button price=17 label_option= 1103 class="view1 white cbtn1 open_sansbold option protein-option">Beef <span id="price-difference-for-1103"></span></button>            </center>

            <br>
            <div class="textCenter" style="font-weight:700">
                Add this meal to the delivery days below:
                <br><br>
            </div>
            <table>

                    <div class="satin background_option">
                <p style="display:inline-block;margin-right:150px">Monday, May 15th</p>
                <span style="float:right;">
                    <i id="qty-minus1" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
                    <input id="qty1" type="number" value="2" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
                    <i id="qty-plus1" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
                </span>
            </div>

                            <div class="satin background_option" style="margin-top:10px;height:50px;">
                <p style="display:inline-block;margin-right:150px">Wednesday, May 17th</p>
                <span style="float:right;">
                    <i id="qty-minus3" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
                    <input id="qty3" type="number" value="2" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
                    <i id="qty-plus3" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
                </span>
            </div>

            <div class="satin background_option" style="margin-top:10px;height:50px;">
                <p style="display:inline-block;margin-right:150px">Friday, May 19th</p>
                <span style="float:right;">
                    <i id="qty-minus5" class="fa fa-minus-circle controls" style="color: #d7d6d0"></i>
                    <input id="qty5" type="number" value="3" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">
                    <i id="qty-plus5" class="fa fa-plus-circle controls"  style="color: #d7d6d0"></i>
                </span>
            </div>
                </table>
            <center>
            <a style="color:white;text-decoration:none;" href="../deliveries"><button class=" view-add white cbtn1 open_sansbold option">Back </button></a>
            <button id= "add-to-cart" class=" view-disable white cbtn1 open_sansbold option" disabled> ADD TO CART </button>
            </center>
            </article>

我已经有了这个JavaScript来对按钮进行定价

$(".protein-option").click(function() {
        var this_id = $(this).attr("label_option");
        var this_price = parseInt($(this).attr("price"), 10);
        console.log("this_id" + this_id + "-- " + this_price);

        $("#totalprice").val($(this).attr("price"));

        $(".protein-option").each(function() {
            var loop_id = $(this).attr("label_option");
            var loop_price = parseInt($(this).attr("price"), 10);
            var difference = loop_price - this_price;
            var sign = Math.sign(difference);
            difference = Math.abs(difference);
            difference = parseFloat(difference).toFixed(2);
            if(sign == 0) {
                difference = "$0.00";
            } else if (sign == 1) {
                difference = "+$" + difference;
            } else if (sign == -1) {
                difference = "-$" + difference;
            }

            console.log(loop_id + " -- " + loop_price + " -- " + difference + " -- " + sign);
            $("#price-difference-for-"+loop_id).html(difference);
        });

        $("#price-difference-for-"+this_id).html(" ");
    });

我把这个代码放在onclick之后（我在页面顶部声明了我的数组）

var meal_label_qty = $(this).attr("label_option");
var id_mon_qty = $("#qty1").val();
var id_tues_qty = $("#qty2").val();
var id_wed_qty = $("#qty3").val();
var id_thur_qty = $("#qty4").val();
var id_fri_qty = $("#qty5").val();

//gets meal id and qty
label_options.push(meal_label_qty);
qty_options.push(id_mon_qty,id_tues_qty,id_wed_qty,id_thur_qty,id_fri_qty);
meal_qty.push(label_options,qty_options);
alert(meal_qty);

我收到的提醒是正确的，但是如何根据label_option ID进行更改？

这是我的代码的样子

Answer 1

所以你可能想把它存放在一个对象中（比搜索数组要好得多）然后在每次更改时恢复？

var quantperproduct={};
var meal_label_qty="1011";


$(".protein-option").on("click",function(){
    var elements=[1,2,3,4,5].map(el=>$("#qty"+el));
    var quantities=elements.map(el=>el.val());
    //store them:
    quantperproduct[meal_label_qty]=quantities;
    //restore the new label ( if possible) 
    meal_label_qty = $(this).attr("label_option");
    elements.forEach((el,i)=>el.val((quantperproduct[meal_label_qty]||[])[i]||0));
});

单击按钮选项时，创建一个保存id数量的数组并进行更改

1 个答案: