ボタン内のクリックカウントを制限する - Jquery

Question

JQueryを使用していくつかのフォーム入力をクローンします。私が達成したいのは、追加ボタン内のカウンターが、その2つのボタンの1つでイベントをトリガーすることです。カウントが0（ゼロ）の場合、私は追加ボタンを無効にしてクラスを割り当てたい（非アクティブ）。カウントが9の場合、私はdel-buttonを無効にし、そのクラスにクラスを割り当てます（not-acitve）。私もそれのためのフィドルを作った

$(document).ready(function() { 

    var upcount = 0; 
    var downcount = 0; 
    var start = 9; 

    $("#add").click(function() { 
    upcount++; 
    $("#counter").html(start - upcount + downcount); 
    }); 

    $("#del").click(function() { 
    downcount++; 
    $("#counter").html(start - upcount + downcount); 
    }); 

}); 

：https://jsfiddle.net/phii/8zf31158/

誰かがif文で私を助けることができる。このよう

<button id="add" class="active" type="button">Downcount&nbsp;&#040;<span id="counter">9</span>&#041;</button> 
<button id="del" class="active" type="button">Upcount</button> 

のjQuery：

私のコードは次のようになりますまたは私の目標を達成するためのよりエレガントな方法？

ありがとうございます！

Answer 1

方法を変更し、1つだけcounterを使用してください。

その後、counterとdisableの値を確認する関数を作成して、buttonを作成することができます。

$(document).ready(function() { 
 
    var counter = 9; 
 
    
 
    $("#add").click(function() { 
 
    counter++; 
 
    $("#counter").html(counter); 
 
    checkcounter(); 
 
    }); 
 

 
    $("#del").click(function() { 
 
    counter--; 
 
    $("#counter").html(counter); 
 
    checkcounter(); 
 
    }); 
 
    
 
    function checkcounter() 
 
    { 
 
    if(counter >= 10) 
 
     $("#add").prop("disabled",true); 
 
    else if(counter<=0) 
 
    { 
 
     $("#del").prop("disabled",true); 
 
    } 
 
    else 
 
    { 
 
     $("#add").prop("disabled",false); 
 
     $("#del").prop("disabled",false); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add" class="active" type="button">Downcount&nbsp;&#040;<span id="counter">9</span>&#041;</button> 
 
<button id="del" class="active" type="button">Upcount</button>

Answer 2

私はあなたがあなたの目標を達成するために、よりエレガントな方法としてthisのように行うことができると思います。

var upcount = 9; 
 
function updateCount() { 
 
    $("#counter").html(upcount); 
 
} 
 
$(document).ready(function() { 
 
    $("#add").click(function() { 
 
     (upcount < 9) && upcount++; 
 
     updateCount(); 
 
    }); 
 
    $("#del").click(function() { 
 
     (upcount > 0) && upcount--; 
 
     updateCount(); 
 
    }); 
 
});

<button id="del" class="active" type="button">Downcount&nbsp;&#040;<span id="counter">9</span>&#041;</button> 
 
<button id="add" class="active" type="button">Upcount</button> 
 
<script 
 
    src="https://code.jquery.com/jquery-1.12.4.min.js" 
 
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
 
    crossorigin="anonymous"></script>