如何使用js/jquery從下到上進行計數？

Question

正如你在我的例子中看到的，我有我的輸入文本的.minus和.plus類。所以當我點擊加號時，如果我點擊減號，我想添加數字值。我想從零開始加入（對不起，我的英語不好）

我的意思是我的最小值必須是：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>