1

私が持っているもの：

読み取り専用のテキスト ボックスと 2 つのリンクがあります。最初のリンクはテキストボックスの値を 1 増やしますが、2 番目のリンクは値を 1 減らします。

必要なもの:

ゼロでの減少を停止するには、テキストボックスの値が必要です (負の数は必要ありません)。

私のコード:

jQuery:

jQuery(".increment").on('click',function(){
    jQuery(this).next(".amount input").val(parseInt(jQuery(this).next(".amount input").val())+1);
});

jQuery(".decrement").on('click',function(){
    jQuery(this).prev(".amount input").val(parseInt(jQuery(this).prev(".amount input").val())-1);
});

注: 複数のテキスト ボックスがあるため、.next と .prev が使用されます。

HTML:

<!--This block of code is occurs more than once.-->
<td class="amount">
    <a href="#" class="increment"></a>
    <input type="text" readonly="readonly" value="0" />
    <a href="#" class="decrement"></a>
</td>

大まかな推測：

...デクリメントに関して...

// open onclick code here

    if (jQuery(this).prev(".amount input").val != "0"){

        // decrement code here

    }

// close onclick code here

資力：

私の作業コードは、このスタック オーバーフローの回答をモデルにしています: https://stackoverflow.com/a/12209831/835950

...利便性のためにフィドルが存在する場所: http://jsfiddle.net/iMaverick/S3PLG/2/

4

2 に答える 2

3

デモ

$("#down").on('click',function(){
    var value = (parseInt($("#incdec input").val() , 10) - 1);
    $("#incdec input").val((value-1) < 0 ? 0 :(value -1));
});
于 2013-04-22T04:08:14.057 に答える
1

ほとんど：

$(document).ready(function() {
    var $textbox = $("#incdec input");

    $("#up").click(function(){
        var value = parseInt($textbox.val(), 10);

        $textbox.val(value + 1);
    });

    $("#down").click(function(){
        var value = parseInt($textbox.val(), 10);

        if (value > 0) {
            $textbox.val(value - 1);
        }
    });
});

HTML5 には次の<input type="number">要素も含まれます。

<input type="number" min="0" value="1" />
于 2013-04-22T04:09:06.747 に答える