jquery。每個動態多個值

Question

請幫我解決我的問題。下面的代碼正常工作，但問題是數據僅從第一次迭代中獲取。我如何讓它適用於所有人？如果問題非常愚蠢，我很抱歉。

<tbody><tr class="tr_cart_1"> 
       <input type="hidden" value="1" id="item_id_cart"> 
       <td data-th="Product"> 
        <div class="row"> 
         <div class="col-sm-2 hidden-xs"><img 
           src="..." width="100" height="100" alt="..." 
           class="img-responsive" /></div> 
         <div class="col-sm-10"> 
          <h4 class="nomargin">...</h4> 
          <p>...</p> 
         </div> 
        </div> 
       </td> 
       <td data-th="Price"><span id="price_cart">123</span></td> 
       <td data-th="Quantity"> 
        <form action="" method="post" name="refresh" class="text-center"><div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="..."></div> 
         <input id="qty_cart" name="qty" size="2" type="text" value="2"></form> 

       </td> 
       <td data-th="Subtotal" class="text-center"> 
        <span class="sum_cart" id="id_sum_cart_1">246</span> 
       </td> 
       <td class="actions" data-th=""> 
        <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button> 
        <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button> 
       </td> 
      </tr><tr class="tr_cart_3"> 
       <input type="hidden" value="3" id="item_id_cart"> 
       <td data-th="Product"> 
        <div class="row"> 
         <div class="col-sm-2 hidden-xs"><img 
           src="..." width="100" height="100" alt="..." 
           class="img-responsive" /></div> 
         <div class="col-sm-10"> 
          <h4 class="nomargin">...</h4> 
          <p>...</p> 
         </div> 
        </div> 
       </td> 
       <td data-th="Price"><span id="price_cart">30</span></td> 
       <td data-th="Quantity"> 
        <form action="" method="post" name="refresh" class="text-center"><div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div> 
         <input id="qty_cart" name="qty" size="2" type="text" value="2"></form> 

       </td> 
       <td data-th="Subtotal" class="text-center"> 
        <span class="sum_cart" id="id_sum_cart_3">60</span> 
       </td> 
       <td class="actions" data-th=""> 
        <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button> 
        <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button> 
       </td> 
      </tr><tr class="tr_cart_2"> 
       <input type="hidden" value="2" id="item_id_cart"> 
       <td data-th="Product"> 
        <div class="row"> 
         <div class="col-sm-2 hidden-xs"><img 
           src="..." width="100" height="100" alt="..." 
           class="img-responsive" /></div> 
         <div class="col-sm-10"> 
          <h4 class="nomargin">...</h4> 
          <p></p> 
         </div> 
        </div> 
       </td> 
       <td data-th="Price"><span id="price_cart">30</span></td> 
       <td data-th="Quantity"> 
        <form action="" method="post" name="refresh" class="text-center"><div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div> 
         <input id="qty_cart" name="qty" size="2" type="text" value="2"></form> 

       </td> 
       <td data-th="Subtotal" class="text-center"> 
        <span class="sum_cart" id="id_sum_cart_2">60</span> 
       </td> 
       <td class="actions" data-th=""> 
        <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button> 
        <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button> 
       </td> 
      </tr></tbody> 

$(document).on("click", "#ref_cart_btn", function() { 
     $('[class*="tr_cart_"]').each(function(i) { 
      var item_id_cart = $("#item_id_cart").attr('value'); 
      var qty = $("#qty_cart").val(); 
      alert (qty); 
      var price = $("#price_cart").text(); 
      alert (price); 
      alert(item_id_cart); 
      $("#id_sum_cart_" + item_id_cart).text(qty*price); 
     }); 
    }); 

Answer 1

你的錯誤是在HTML中。

該ID是唯一標識符，如MDN中所述，而您爲多個元素重複相同的ID。

在這種情況下，您需要更改ID，以便他們將不得不像id_sum_cart_

一個簡單的解決問題的方法元素的不同可以得到每一個元素尋找當前的一組內：

$(document).on("click", "#ref_cart_btn", function() { 
 
    $('tr[class^="tr_cart_"]').each(function(index, element) { 
 
    var item_id_cart = $(this).find('input[type="hidden"][id="item_id_cart"]').val(); 
 
    var qty = $(this).find('input[type="text"][id="qty_cart"]').val(); 
 
    var price = $(this).find('span[id="price_cart"]').text(); 
 
    alert ('item_id_cart: ' + item_id_cart + ' qty: ' + qty + ' price: ' + price); 
 
    $("#id_sum_cart_" + item_id_cart).text(qty*price); 
 
    }); 
 
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 

 
<button id="ref_cart_btn">Button</button> 
 
<table> 
 
    <tbody> 
 
    <tr class="tr_cart_1"> 
 
     <input type="hidden" value="1" id="item_id_cart"> 
 
     <td data-th="Product"> 
 
      <div class="row"> 
 
       <div class="col-sm-2 hidden-xs"><img 
 
         src="..." width="100" height="100" alt="..." 
 
         class="img-responsive"/></div> 
 
       <div class="col-sm-10"> 
 
        <h4 class="nomargin">...</h4> 
 

 
        <p>...</p> 
 
       </div> 
 
      </div> 
 
     </td> 
 
     <td data-th="Price"><span id="price_cart">123</span></td> 
 
     <td data-th="Quantity"> 
 
      <form action="" method="post" name="refresh" class="text-center"> 
 
       <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="..."></div> 
 
       <input id="qty_cart" name="qty" size="2" type="text" value="2"></form> 
 

 
     </td> 
 
     <td data-th="Subtotal" class="text-center"> 
 
      <span class="sum_cart" id="id_sum_cart_1">246</span> 
 
     </td> 
 
     <td class="actions" data-th=""> 
 
      <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button> 
 
      <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button> 
 
     </td> 
 
    </tr> 
 
    <tr class="tr_cart_3"> 
 
     <input type="hidden" value="3" id="item_id_cart"> 
 
     <td data-th="Product"> 
 
      <div class="row"> 
 
       <div class="col-sm-2 hidden-xs"><img 
 
         src="..." width="100" height="100" alt="..." 
 
         class="img-responsive"/></div> 
 
       <div class="col-sm-10"> 
 
        <h4 class="nomargin">...</h4> 
 

 
        <p>...</p> 
 
       </div> 
 
      </div> 
 
     </td> 
 
     <td data-th="Price"><span id="price_cart">30</span></td> 
 
     <td data-th="Quantity"> 
 
      <form action="" method="post" name="refresh" class="text-center"> 
 
       <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div> 
 
       <input id="qty_cart" name="qty" size="2" type="text" value="2"></form> 
 

 
     </td> 
 
     <td data-th="Subtotal" class="text-center"> 
 
      <span class="sum_cart" id="id_sum_cart_3">60</span> 
 
     </td> 
 
     <td class="actions" data-th=""> 
 
      <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button> 
 
      <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button> 
 
     </td> 
 
    </tr> 
 
    <tr class="tr_cart_2"> 
 
     <input type="hidden" value="2" id="item_id_cart"> 
 
     <td data-th="Product"> 
 
      <div class="row"> 
 
       <div class="col-sm-2 hidden-xs"><img 
 
         src="..." width="100" height="100" alt="..." 
 
         class="img-responsive"/></div> 
 
       <div class="col-sm-10"> 
 
        <h4 class="nomargin">...</h4> 
 

 
        <p></p> 
 
       </div> 
 
      </div> 
 
     </td> 
 
     <td data-th="Price"><span id="price_cart">30</span></td> 
 
     <td data-th="Quantity"> 
 
      <form action="" method="post" name="refresh" class="text-center"> 
 
       <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div> 
 
       <input id="qty_cart" name="qty" size="2" type="text" value="2"></form> 
 

 
     </td> 
 
     <td data-th="Subtotal" class="text-center"> 
 
      <span class="sum_cart" id="id_sum_cart_2">60</span> 
 
     </td> 
 
     <td class="actions" data-th=""> 
 
      <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button> 
 
      <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

但是，正如我所說，我建議您更改ID，如：

$(document).on("click", "#ref_cart_btn", function() { 
 
    $('tr[class^="tr_cart_"]').each(function(index, element) { 
 
    var item_id_cart = $('#item_id_cart_' + (index + 1)).val(); 
 
    var qty = $('#qty_cart_' + (index + 1)).val(); 
 
    var price = $('#price_cart_' + (index + 1)).text(); 
 
    alert ('item_id_cart: ' + item_id_cart + ' qty: ' + qty + ' price: ' + price); 
 
    $("#id_sum_cart_" + item_id_cart).text(qty*price); 
 
    }); 
 
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 

 
<button id="ref_cart_btn">Button</button> 
 
<table> 
 
    <tbody> 
 
    <tr class="tr_cart_1"> 
 
     <input type="hidden" value="1" id="item_id_cart_1"> 
 
     <td data-th="Product"> 
 
      <div class="row"> 
 
       <div class="col-sm-2 hidden-xs"><img 
 
         src="..." width="100" height="100" alt="..." 
 
         class="img-responsive"/></div> 
 
       <div class="col-sm-10"> 
 
        <h4 class="nomargin">...</h4> 
 

 
        <p>...</p> 
 
       </div> 
 
      </div> 
 
     </td> 
 
     <td data-th="Price"><span id="price_cart_1">123</span></td> 
 
     <td data-th="Quantity"> 
 
      <form action="" method="post" name="refresh" class="text-center"> 
 
       <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="..."></div> 
 
       <input id="qty_cart_1" name="qty" size="2" type="text" value="2"></form> 
 

 
     </td> 
 
     <td data-th="Subtotal" class="text-center"> 
 
      <span class="sum_cart" id="id_sum_cart_1">246</span> 
 
     </td> 
 
     <td class="actions" data-th=""> 
 
      <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button> 
 
      <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button> 
 
     </td> 
 
    </tr> 
 
    <tr class="tr_cart_3"> 
 
     <input type="hidden" value="2" id="item_id_cart_2"> 
 
     <td data-th="Product"> 
 
      <div class="row"> 
 
       <div class="col-sm-2 hidden-xs"><img 
 
         src="..." width="100" height="100" alt="..." 
 
         class="img-responsive"/></div> 
 
       <div class="col-sm-10"> 
 
        <h4 class="nomargin">...</h4> 
 

 
        <p>...</p> 
 
       </div> 
 
      </div> 
 
     </td> 
 
     <td data-th="Price"><span id="price_cart_2">30</span></td> 
 
     <td data-th="Quantity"> 
 
      <form action="" method="post" name="refresh" class="text-center"> 
 
       <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div> 
 
       <input id="qty_cart_2" name="qty" size="2" type="text" value="2"></form> 
 

 
     </td> 
 
     <td data-th="Subtotal" class="text-center"> 
 
      <span class="sum_cart" id="id_sum_cart_2">60</span> 
 
     </td> 
 
     <td class="actions" data-th=""> 
 
      <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button> 
 
      <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button> 
 
     </td> 
 
    </tr> 
 
    <tr class="tr_cart_2"> 
 
     <input type="hidden" value="3" id="item_id_cart_3"> 
 
     <td data-th="Product"> 
 
      <div class="row"> 
 
       <div class="col-sm-2 hidden-xs"><img 
 
         src="..." width="100" height="100" alt="..." 
 
         class="img-responsive"/></div> 
 
       <div class="col-sm-10"> 
 
        <h4 class="nomargin">...</h4> 
 

 
        <p></p> 
 
       </div> 
 
      </div> 
 
     </td> 
 
     <td data-th="Price"><span id="price_cart_3">30</span></td> 
 
     <td data-th="Quantity"> 
 
      <form action="" method="post" name="refresh" class="text-center"> 
 
       <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value=""></div> 
 
       <input id="qty_cart_3" name="qty" size="2" type="text" value="2"></form> 
 

 
     </td> 
 
     <td data-th="Subtotal" class="text-center"> 
 
      <span class="sum_cart" id="id_sum_cart_3">60</span> 
 
     </td> 
 
     <td class="actions" data-th=""> 
 
      <button class="btn btn-info btn-sm" id="ref_cart"><i class="fa fa-refresh"></i></button> 
 
      <button class="btn btn-danger btn-sm" id="del_cart"><i class="fa fa-trash-o"></i></button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>