js/jqueryでカウントダウンするには？

Question

私の例で分かるように、入力テキストには.minusと.plusのクラスがあります。だからプラスをクリックすると、マイナスをクリックすると数値が上に加算されます。0から下に追加したいです（私の悪い英語を申し訳ありません）

私の最小値は：0でなければなりません。 ：unlimitedまたは50または500

どうすればいいですか？

.count-box { 
 
    margin: 30px; 
 
} 
 

 
.count-box i { 
 
    font-size: 32px; 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    vertical-align: middle; 
 
} 
 

 
input[type="text"] { 
 
    text-align: center; 
 
    width: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="count-box"> 
 
    <h3>ADULT</h3> 
 
    <i class="plus">+</i> 
 
    <input type="text" value="1"> 
 
    <i class="minus">-</i> 
 
</div> 
 

 

 
<div class="count-box"> 
 
    <h3>CHILDREN</h3> 
 
    <i class="plus">+</i> 
 
    <input type="text"> 
 
    <i class="minus">-</i> 
 
</div> 
 

 
<div class="count-box"> 
 
    <h3>BABY</h3> 
 
    <i class="plus">+</i> 
 
    <input type="text"> 
 
    <i class="minus">-</i> 
 
</div> 
 

 
<div class="total-box"> 
 
    <h1>TOTAL:</h1> <span class="total-count"></span> 
 
</div>

Answer 1

以下

チェック更新スニペット..

$(function(){ 
 
    updateTotal(); 
 
    $('.plus').click(function(){ 
 
     $(this).siblings('input').val(parseInt($(this).siblings('input').val())+1); 
 
     updateTotal(); 
 
    }) 
 
    
 
    $('.minus').click(function(){ 
 
     $(this).siblings('input').val(parseInt($(this).siblings('input').val())-1); 
 
     updateTotal(); 
 
    }) 
 

 

 
}) 
 
function updateTotal(){ 
 
    var total = 0; 
 
    $('input').each(function(){ 
 
     total += parseInt($(this).val()); 
 
    }) 
 
    $('.total-count').html(total); 
 
}

.count-box { 
 
    margin: 30px; 
 
} 
 

 
.count-box i { 
 
    font-size: 32px; 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    vertical-align: middle; 
 
} 
 

 
input[type="text"] { 
 
    text-align: center; 
 
    width: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="count-box"> 
 
    <h3>ADULT</h3> 
 
    <i class="plus">+</i> 
 
    <input type="text" value="1" min="0"> 
 
    <i class="minus">-</i> 
 
</div> 
 

 

 
<div class="count-box"> 
 
    <h3>CHILDREN</h3> 
 
    <i class="plus">+</i> 
 
    <input type="text" min="0" value="0"> 
 
    <i class="minus">-</i> 
 
</div> 
 

 
<div class="count-box"> 
 
    <h3>BABY</h3> 
 
    <i class="plus">+</i> 
 
    <input type="text" min="0" value="0"> 
 
    <i class="minus">-</i> 
 
</div> 
 

 
<div class="total-box"> 
 
    <h1>TOTAL:</h1> <span class="total-count"></span> 
 
</div>