Jquery中的加/减增量器，如何概括？答案

【问题标题】：Plus/minus incrementator in Jquery, how to generalize?Jquery中的加/减增量器，如何概括？
【发布时间】：2012-12-17 11:33:21
【问题描述】：

我正在使用此代码

<a id="minus" href="#">-</a>
   <span id="VALUE">0</span>
<a id="plus" href="#">+</a>

Javascript：

$(function(){

    var valueElement = $('#VALUE');
    function incrementValue(e){
        valueElement.text(Math.max(parseInt(valueElement.text()) + e.data.increment, 0));
        return false;
    }

    $('#plus').bind('click', {increment: 1}, incrementValue);

    $('#minus').bind('click', {increment: -1}, incrementValue);

});

拥有一个名为“VALUE”的文件的加/减增量器。现在，我有一个使用这个包含 150 个字段的表单，像这样......有一种方法可以概括此代码，以某种方式将用户正在递增/递减的字段的名称传递给函数？否则，我必须复制此代码 150 次...

【问题讨论】：

标签： jquery increment

【解决方案1】：

如果有帮助，试试这个：

我改变了一点，我使用classes .plus, .minus而不是ids #plus, #minus

 $('.plus').click(function() {
    var sp = parseFloat($(this).prev('span').text());
    $(this).prev('span').text(sp + 1);
 });

 $('.minus').click(function() {
    var sp = parseFloat($(this).next('span').text());
    $(this).next('span').text(sp - 1);
 });

在小提琴中检查一下：http://jsfiddle.net/L2UPw/

【讨论】：

酷！这样我如何访问跨度的值？我尝试了一个 $("#value").val() 分配名称和 id 像“值”，但它似乎不起作用。那么我想使用输入类型文本而不是跨度呢？谢谢！！
已解决。我改为“$(this).next('input').val()”，我可以使用“input”而不是 span。好答案！谢谢！

【解决方案2】：

把它们放在一个容器里

<span class="stepper">
   <dec>-</dec>
   <span>0</span>
   <inc>+</inc>
</span>

这样你就可以相对地选择显示，而不用太麻烦了

$(this).parent().children("span");

在各自的 click 处理程序中。

【讨论】：

【解决方案3】：

在选择器中使用类而不是 ID

$('.minus').bind('click', {increment: -1}, incrementValue);

和

< a id="minus1" class="minus" href="#">-< /a>
...
< a id="minus150" class="minus" href="#">-< /a>

【讨论】：

【解决方案4】：

如果您想通用化您的代码，那么最好的方法是在影响值的两个元素上使用一个类，但添加一个 data 属性，这是调整添加/删除量的因素。然后，您可以将控件包装在包含 div 的单个控件中，以使 DOM 遍历更容易。

通过使用这种模式，您可以在页面上拥有多个控件实例，所有按钮都由一个单击处理程序控制。试试这个：

$('.value-amender').click(function() {
  var $el = $(this);
  $el.closest('.amender-container').find('.value').text(function(i, t) {
    return parseInt(t, 10) + (1 * $el.data('factor'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="amender-container">
  <a class="value-amender" href="#" data-factor="-1">-</a>
  <span class="value">0</span>
  <a class="value-amender" href="#" data-factor="1">+</a>
</div>

<div class="amender-container">
  <a class="value-amender" href="#" data-factor="-1">-</a>
  <span class="value">0</span>
  <a class="value-amender" href="#" data-factor="1">+</a>
</div>

【讨论】：