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()方法访问类change的父div，然后您可以读取数据属性ID的值。

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

由于您已使用非营养性javascript绑定了click事件，因此您不需要HTML标记中的onclick代码。

此外，您的quantity_change方法需要2个参数并使用两个参数，但您只传递一个参数。您可以在锚标记上的HTML 5数据属性中保留way的值，并从中读取并将其传递给您的方法。

<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是一个工作样本。

Jquery多个加/减脚本

1 个答案: