idの量を保存する配列を作成し、ボタンオプションをクリックしたときに変更されます

Question

このコードがありますので、その日の数量を選択してカートに追加して、私はまだ私の量を見ることができますが、あなたが見ることができるように私は異なる食事の選択肢を持っています、量がidsと一致するようにする方法はありますか？もし私の牛肉の量が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> 

私はすでに私はonclickの後にこのコードを入れ

$(".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(" "); 
    }); 

ボタンの上に価格設定を行うには、このJavaScriptを持って

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)); 
});