Jquery中的加/减增量器，如何推广？

我正在使用此代码

- 0 + 

使用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次…

Answer 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/

Answer 2

把它们放在容器里面

  - 0 +  

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

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

在各自的click处理程序中。

Answer 3

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

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

和

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

Answer 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')); }); }); 

  
 - 0 + 
 
 - 0 +