2

javascript と 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/

編集: Blender との私の議論に応えて、より広範な HTML: http://jsfiddle.net/4ELhf/

4

7 に答える 7

2

ここにはいくつかの問題があります。

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-25T09:50:34.053 に答える
2

それは、フィールドを通過しないためです。

に電話を変更することができます

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

eventData(に渡す最初の引数)を使用するclickと、これらのデータは引数としてハンドラーに直接渡されるのではなく、event.data. したがって、これを行うこともできます：

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

インクリメントするには、文字列も解析する必要があることに注意してください。

このeventData議論については、次のドキュメントのon方が明確であることがわかりました。

イベントがトリガーされたときに event.data でハンドラーに渡されるデータ。

于 2013-02-25T09:50:45.080 に答える
2 
$("#WS1inc").click(function(){
     $("#WS1").val(parseInt($("#WS1").val())+1);
});

デモはこちらhttp://jsfiddle.net/MycnR/1/

于 2013-02-25T09:50:47.030 に答える
1

構文が少し混乱しています。これを行うための非常に冗長な方法を次に示します。

$("#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-25T09:50:58.160 に答える
1

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-25T09:52:24.093 に答える
1

イベント ハンドラーに渡される最初の引数は、イベント オブジェクトです。jquery では、イベント ハンドラー ( this) のコンテキストは、そのイベントをリッスンした要素に設定されます。おそらく、それに関連する可能性があり、関数を次のように変更することができます。

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

これがライブデモです: http://jsfiddle.net/MycnR/5/

于 2013-02-25T09:53:03.133 に答える
1

一般的な機能:

デモ

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-25T09:59:07.407 に答える