Jquery多個加號/減號腳本

Question

我在頁面上有多個表單，還有多個帶有加號/減號的輸入框。

我很難讓這些輸入框單獨工作。可能是因爲一些錯誤/相同的ID或類似的東西，或者可能是我的代碼錯誤的設置。問題是我在代碼中找不到我的錯誤，並且在控制檯中沒有出現任何錯誤。

我有什麼：

 function quantity_change(way, id){ 

      quantity = $('#product_amount_'+id).val(); 
      if(way=='up'){ 
      quantity++; 
       } else { 
       quantity--; 
      } 
      if(quantity<1){ 
      quantity = 1; 
      } 
      if(quantity>10){ 
      quantity = 10; 
      } 
      $('#product_amount_'+id).val(quantity); 

     } 

而且我的html：

//row 1 
<div class="amount"><input type="text" name="quantity" value="1" id="product_amount_1234"/></div> 
    <div class="change" data-id="1234"> 
    <a href="javascript:;" onclick="quantity_change('up');" title="+" class="up">+</a> 
    <a href="javascript:;" onclick="quantity_change('down');" title="-" class="down">-</a> 
</div> 

//row 2 
<div class="amount"><input type="text" name="quantity" value="1" id="product_amount_4321"/></div> 
    <div class="change" data-id="4321"> 
    <a href="javascript:;" onclick="quantity_change('up');" title="+" class="up">+</a> 
    <a href="javascript:;" onclick="quantity_change('down');" title="-" class="down">-</a> 
</div> 

我覺得這樣的事情會做的伎倆，但它不:(

$(document).ready(function(){ 
      $('.change a').click(function(){ 
       var id = $(this).find('.change').data('id'); 
       quantity_change(id) 
      }); 
      }); 

任何非常感謝！

Answer 1

您應該使用closest()方法訪問父類div change，然後您可以讀取數據屬性ID的值。

var id = $(this).closest('.change').data('id'); 
alert(id); 

由於您使用的JavaScript unobutrusive已經結合的Click事件，你並不需要在你的HTML標記的onclick代碼。

此外，您的quantity_change方法需要2個參數並使用兩個參數，但您只傳遞一個參數。您可以將值爲way的HTML 5數據屬性保留在錨標記上，並從中讀取並將其傳遞給您的方法。

<div class="change" data-id="1234"> 
    <a href="#" data-way="up" title="+" class="up">+</a> 
    <a href="#" data-way="down" title="-" class="down">-</a> 
</div> 

所以校正後的js代碼是

$(document).ready(function(){ 

    $('.change a').click(function(e){ 
      e.preventDefault(); 
      var _this=$(this); 

      var id = _this.closest('.change').data('id'); 
      var way= _this.data("way"); 

      quantity_change(way,id) 
    }); 

}); 

Here是工作示例。