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中的加/減號，如何推廣？

回答

相關問題