Question

我正在使用此代码

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

Answer 1

将它们放在像

这样的容器中

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

这样你可以相对选择显示，而不用像

那样太麻烦

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

在相应的click处理程序中。

Answer 2

尝试这个，如果这有帮助：

我使用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 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遍历。

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

＆＃13;

$('.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'));
  });
});

＆＃13;

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

＆＃13;

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

4 个答案: