1

入力の選択に少し問題があります。基本的に、同じ要素に含まれる単一の入力の値を増減するにはボタンが必要です。

HTMLは次のとおりです。

<div>
    <label for="name">Adult Males</label>
    <div class="dec button">-</div>
    <input type="text" name="qty" id="1" value="0" />
    <div class="inc button">+</div>
</div>
<div>
    <label for="name">Adult Females</label>
    <div class="dec button">-</div>
    <input type="text" name="adult-female" id="2" value="0"/>
    <div class="inc button">+</div>
</div>

...そしてjQuery:

var incrementVar = 0;

$(function() {
    $(".inc").click(function() {
        var newValue = parseInt($(":input[name='qty']").val()) + 1;
        $(":input[name='qty']").val(newValue);
        $('.inc').addClass('a' + newValue);
        incrementVar = incrementVar + newValue;
    });
    $(".dec").click(function() {
        var newValue = parseInt($(":input[name='qty']").val()) - 1;
        $(":input[name='qty']").val(newValue);
        $('.inc').addClass('a' + newValue);
        incrementVar = incrementVar + newValue;
    });
});

これは機能しますが、現時点では成人男性のみです。ボタンが同じ div に含まれる入力をターゲットにするようにします。

4

6 に答える 6

4 
incrementVar = 0;
$('.inc.button').click(function(){
    var $this = $(this),
        $input = $this.prev('input'),
        $parent = $input.closest('div'),
        newValue = parseInt($input.val(), 10)+1;
    $parent.find('.inc').addClass('a'+newValue);
    $input.val(newValue);
    incrementVar += newValue;
});
$('.dec.button').click(function(){
    var $this = $(this),
        $input = $this.next('input'),
        $parent = $input.closest('div'),
        newValue = parseInt($input.val(), 10)-1;
    $parent.find('.inc').addClass('a'+newValue);
    $input.val(newValue);
    incrementVar += newValue;
});

デモ

于 2011-09-12T08:03:31.533 に答える
3

これを行うコードを次に示します。重要なのは、クリックされたボタンの親に移動し、その親にある入力を見つけることです。これにより、操作するのに適切なものが得られます。また、これらの変更/改善を行いました:

  1. すべてのコードを、インクリメントとデクリメントの両方で呼び出すことができる関数に入れました。
  2. parseInt()推測したくない場合に必要な基数を追加しました。
  3. デクリメントがゼロ以下にならないようにしました。
  4. 入力要素の ID 値を有効な値に修正しました (ID を数字で始めることはできません)。

新しいコードは次のとおりです。

$(".inc").click(function() {
    updateValue(this, 1);
});
$(".dec").click(function() {
    updateValue(this, -1);
});

function updateValue(obj, delta) {
    var item = $(obj).parent().find("input");
    var newValue = parseInt(item.val(), 10) + delta;
    item.val(Math.max(newValue, 0));
}

ここでの作業例: http://jsfiddle.net/jfriend00/Y6tFj/

すべてのインクリメント/デクリメント ボタンに常に新しいクラスを追加しているため、クラスの変更が意味をなさないため、クラスの変更を削除しました。

また、incrementVar で何をしようとしているのかもわかりませんでした。

于 2011-09-12T07:53:57.747 に答える
0

あなたが使用することができます：

var input = $(this).siblings(":input[name='qty']").get(0)

その後

var newValue = parseInt(input.value) + 1;
$(input).val(newValue);
于 2011-09-12T07:58:49.940 に答える
0

セレクターを使用する代わりに、 および を使用して要素を検索prev()できます。next()

実際の動作をご覧ください: http://jsfiddle.net/william/t4Np7/1/。

于 2011-09-12T07:54:11.463 に答える
0

成人女性セクション内の入力要素の名前はadult-femaleではなくqtyです。nextjQuery のalaを使用するようにセレクターを調整できます$(this).next(":input")。

于 2011-09-12T07:52:27.060 に答える
0

使用する

 var newValue = parseInt( $(this).prev(":input[name='qty']").val()) + 1;

それ以外の

 var newValue = parseInt($(":input[name='qty']").val()) + 1;

と

使用する

 var newValue = parseInt( $(this).next(":input[name='qty']").val()) - 1;

それ以外の

 var newValue = parseInt($(":input[name='qty']").val()) - 1;

参照:

于 2011-09-12T07:52:30.213 に答える