用jQuery優雅實現增量按鈕？

在我學習javascript和jQuery的玩具項目中，我需要爲某些輸入字段實現遞增和遞減按鈕。我認爲下面的設計應該可以工作，但不知何故它不會。我誤解了一些關於jQuery的內容，或者它是一個平庸的錯誤？用jQuery優雅實現增量按鈕？

<button type="button" id="WS1inc" class="incbut"> + </button> 
<input type="number" id="WS1" value="1">   


function increment(field) 
{ 
    field.val(field.val()+1); 
} 

$("#WS1inc").click($("#WS1"),increment);

控制檯說對象沒有方法「val（）」，所以我想我不能傳遞這樣的jQuery對象？

的jsfiddle：http://jsfiddle.net/MycnR/

編輯：在回答對我有攪拌機，一些更廣泛的討論HTML： http://jsfiddle.net/4ELhf/

來源

2013-02-25 Kaare

那是因爲你不及格的領域。

您可以更改當您使用eventData（你傳遞給click的第一個參數），這些數據不作爲參數直接傳遞給處理程序，但在event.data調用

$("#WS1inc").click(function(){increment($("#WS1")});

。所以你也可以這樣做：

function increment(e) { 
    e.data.val(parseInt(e.data.val(), 10) +1); 
} 
$("#WS1inc").click($("#WS1"),increment);

請注意，您還必須解析字符串以增加。

關於本eventData說法，我發現the documentation of on是清晰的：

數據傳遞到處理程序event.data當事件觸發。

來源

2013-02-25 09:50:45

是，如何「EVENTDATA」應該被使用？通過http://api.jquery.com/click/，我假設我上面的語法與您向我展示的內容相同？ – Kaare 2013-02-25 09:55:11

@Kaare看到編輯答案，我解釋一下。 – 2013-02-25 09:56:25

非常好:)我真的在這裏學習東西 – Kaare 2013-02-25 10:03:35

這裏有幾個問題。

field.val()+1將被分類爲字符串連接而不是整數增量。首先需要parseInt()才能正確計算。

其次，您如何致電increment()存在問題。

你的代碼更改爲：

function increment(field) 
{ 
    field.val(parseInt(field.val(),10)+1); 
} 

$("#WS1inc").click(function(){ 
    increment($("#WS1")); 
});

現場演示：http://jsfiddle.net/MycnR/2/

來源

2013-02-25 09:50:34 Curt

$("#WS1inc").click(function(){ 
    $("#WS1").val(parseInt($("#WS1").val())+1); 
});

這裏http://jsfiddle.net/MycnR/1/

來源

2013-02-25 09:50:47 Anton

你得混了一點點的語法演示。下面是做這件事的超級詳細的方法：

$("#WS1inc").click(function() { 
    var $element = $("#WS1"); 
    var value = $element.val(); 
    var value_as_integer = parseInt(value, 10); 

    $element.val(value_as_integer + 1); 
});

來源

2013-02-25 09:50:58 Blender

是的，但在這種情況下，我將不得不爲每個增量按鈕編寫（我將有幾個）。雖然我當然可以這樣做，但是沒有辦法只做一個增量函數嗎？ – Kaare 2013-02-25 09:52:43

@Kaare：不是。這裏只是沒有正確使用'id'屬性。爲這些元素提供有意義的類名稱，並且可以稍微更改此代碼以一次性解釋所有元素。 – Blender 2013-02-25 09:54:07

我不明白。如果我有5個增量按鈕和5個輸入字段，每個輸入字段都必須成對連接，那麼當然，我需要爲每個按鈕和字段使用不同的控制柄，因爲按鈕1應該只增加字段1，而不是字段2-5？ – Kaare 2013-02-25 10:00:01

你需要告訴increment功能，它有可能改變其元素。

這可以通過使用data參數爲.on()呼叫，其中所提供的參數顯示爲ev.data事件處理程序內完成：

function increment(ev) { 
    var el = ev.data || this; // use the clicked element if it wasn't supplied 
    el.value = parseInt(el.value, 10) + 1; 
} 

$('#WS1inc').on('click', document.getElementById('WS1'), increment);

注意使用el.value - 有沒有必要使用$(el).val()在大多數情況下和el.value效率更高。

參見http://jsfiddle.net/alnitak/W8fjX/

來源

2013-02-25 09:52:24 Alnitak

他正在增加另一個字段 – mplungjan 2013-02-25 09:52:52

@mplungjan oops - 所以他是！ – Alnitak 2013-02-25 09:53:13

@mplungjan更新到修復，現在 – Alnitak 2013-02-25 09:57:27

傳遞給事件處理程序的第一個參數是所述事件對象。 jQuery中，事件處理的（this）的背景被設置爲聽取該事件的元素......也許你可以涉及到這一點，可能希望將功能更改爲：

function increment(){ 
    var field = $(this).siblings('input'); 
    field.val((+field.val() || 0) + 1); 
}

這裏有一個現場演示：http://jsfiddle.net/MycnR/5/

來源

2013-02-25 09:53:03

他正在增加另一個字段 – mplungjan 2013-02-25 09:53:41

你是對的，謝謝你的高舉 – 2013-02-25 09:57:12

你仍然需要解析數字。這將計數'1'，'11'，'111'，... – Blender 2013-02-25 09:57:55

通用功能：

DEMO

HTML

<button type="button" id="WS1dec" class="but"> - </button> 
<input type="number" id="WS1" value="1">   
<button type="button" id="WS1inc" class="but"> + </button> 
<hr/> 
<button type="button" id="WS2dec" class="but"> - </button> 
<input type="number" id="WS2" value="1">   
<button type="button" id="WS2inc" class="but"> + </button>

jQuery的

$(function() { 
    $(".but").on("click",function() { 
    var id=this.id; 
    var fldId=id.substring(0,id.length-3); 
    var inc=id.substring(id.length-3)=="inc"; 
    var fld = $("#"+fldId); 
    var val = +fld.val(); 
    if (inc)val++;else val--; 
    fld.val(val); 
    }); 
});

來源

2013-02-25 09:59:07 mplungjan

用jQuery優雅實現增量按鈕？

回答

相關問題