Jquery中的加/减号，如何推广？

我使用这个代码Jquery中的加/减号，如何推广？

<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” 的加/减incrementator。现在，我有一个使用这种形式包含150像这样的领域...有一种方法来概括此代码传递给函数用户正在递增/递减字段的名称？否则，我一定要复制这个代码的150倍......

来源

2012-12-17 Sasha Grievus

试试这一个，如果这有助于：

我已经改变了我的小提琴使用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-17 12:02:07 Jai

爽！这样我怎样才能访问跨度的值？我尝试了一个$（“＃value”）。val（）指定名称和id像“值”，但它似乎并没有工作。那么我想使用输入类型文本而不是跨度？谢谢！！ –

解决。我改为“$（this）.next（'input'）。val（）”，我可以使用“输入”而不是跨度。好答案！谢谢！ –

在你选择使用类，而不是一个ID的

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

和

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

来源

2012-12-17 11:39:10 NimChimpsky

把它们放在一个容器内像

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

这样你就可以比较选择显示没有太多卓像

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

在各自的click处理程序。

来源

2012-12-17 11:54:36 dualed

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

Jquery中的加/减号，如何推广？

回答

相关问题