1

我正在使用此代码

<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 次...

4

4 回答 4

1

把它们放在一个容器里，比如

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

这样你就可以相对地选择显示器，而不会太麻烦，比如

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

在各自的click处理程序中。

于 2012-12-17T11:54:36.967 回答
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/

于 2012-12-17T12:02:07.730 回答
0

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

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

和

< a id="minus1" class="minus" href="#">-< /a>
...
< a id="minus150" class="minus" href="#">-< /a>
于 2012-12-17T11:39:10.100 回答
0

如果您想通用化您的代码，那么最好的方法是在影响值的两个元素上使用单个类，但添加一个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>

于 2017-07-17T11:14:51.140 回答