Question

我是一个javascript / jquery新手，我想弄清楚的是当你点击加号或减号按钮时数字增加/减少。但是我在不同的容器中有两组这些，但是当它们只点击一组时它们都会改变它们的值。我该如何分开这些？

我在stackoverflow上查找了这个javascript / jquery代码，使加号/减号按钮工作，现在我想了解如何分别完成这些工作。请帮忙？任何帮助表示赞赏！

以下是我的演示：https://jsfiddle.net/hyona/yerfdkvk/

<div class="container">
  <input type='button' value='-' class='qtyminus' field='quantity' />
  <input type='text' name='quantity' value='1' class='qty' />
  <input type='button' value='+' class='qtyplus' field='quantity' />
</div>

<div class="container">
  <input type='button' value='-' class='qtyminus' field='quantity' />
  <input type='text' name='quantity' value='1' class='qty'/>
  <input type='button' value='+' class='qtyplus' field='quantity' />
</div>


//CSS Styling
.container {
  width: 120px;
  margin: 0 0 10px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.qty {
  width: 50px;
  height: 30px;
  text-align: center;
}

input[type='button'] {
  border: none;
  background: none;
  font-size: 18px;
  outline: none;
  cursor: pointer;
}



$(document).ready(function(){
  $('.qtyplus').click(function(e){
    e.preventDefault();
    fieldName = $(this).attr('field');
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    if (!isNaN(currentVal)) {
      if (currentVal < 20)
      {
        $('input[name='+fieldName+']').val(currentVal + 1);
        $('.qtyminus').val("-").removeAttr('style');
      }
      else
      {
        $('.qtyplus').val("+").css('color','#aaa');
      }
    } else {
      $('input[name='+fieldName+']').val(1);
    }
  });

  $(".qtyminus").click(function(e) {
    e.preventDefault();
    fieldName = $(this).attr('field');
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    if (!isNaN(currentVal) && currentVal > 1) {
      $('input[name='+fieldName+']').val(currentVal - 1);
      $('.qtyplus').val("+").removeAttr('style');
    } else {
      $('input[name='+fieldName+']').val(1);
      $('.qtyminus').val("-").css('color','#aaa');
    }
  });
});

Answer 1

在您的事件处理程序中，您使用的是$('.qtyplus')和$('input[name='+fieldName+']')等选择器，它们选择所有匹配元素。要限制点击元素容器中的内容，请使用.closest()和.find()方法：

$(this).closest('.container').find('input[name='+fieldName+']')

...其中this自动设置为点击的元素。

（对于您当前的HTML结构，您可以使用.siblings()，但我不建议使用它，因为.closest(...).find(...)可以更好地处理更复杂的嵌套结构，因此您不太可能需要更改如果你改变HTML，那就是JS。）

在上下文中：

$(document).ready(function(){
  $('.qtyplus').click(function(e){
    var fieldName = $(this).attr('field');
    var container = $(this).closest('.container');
    var field = container.find('input[name='+fieldName+']');    
    var currentVal = parseInt(field.val());
    if (!isNaN(currentVal)) {
      if (currentVal < 20) {
        field.val(currentVal + 1);
        container.find('.qtyminus').val("-").removeAttr('style');
      } else {
        container.find('.qtyplus').val("+").css('color','#aaa');
      }
    } else {
      field.val(1);
    }
  });

  $(".qtyminus").click(function(e) {
    var fieldName = $(this).attr('field');
    var container = $(this).closest('.container');
    var field = container.find('input[name='+fieldName+']');    
    var currentVal = parseInt(field.val());
    if (!isNaN(currentVal) && currentVal > 1) {
      field.val(currentVal - 1);
      container.find('.qtyplus').val("+").removeAttr('style');
    } else {
      field.val(1);
      container.find('.qtyminus').val("-").css('color','#aaa');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <input type='button' value='-' class='qtyminus' field='quantity' />
  <input type='text' name='quantity' value='1' class='qty' />
  <input type='button' value='+' class='qtyplus' field='quantity' />
</div>

<div class="container">
  <input type='button' value='-' class='qtyminus' field='quantity' />
  <input type='text' name='quantity' value='1' class='qty'/>
  <input type='button' value='+' class='qtyplus' field='quantity' />
</div>

请注意，如果您发现自己在同一个函数中多次使用相同的选择器调用jQuery方法，通常最好使用变量来缓存结果，如上所示。

无需在e.preventDefault()元素的点击处理程序中调用type="button"，因为没有默认行为，因此我已将其从您的代码中删除。

（另请注意，用于设置+/-按钮样式/颜色的逻辑是不完整的（如果用户在字段中键入非数字值，则不会重置它们），但是没有任何内容你要问的是什么，所以我会把它作为读者的练习。）

如何让它们在各自的容器中独立行动？

1 个答案: