javascript - 使用 jquery 进行自增和自减

Question

我正在对三个类别的值进行递增和递减 1 操作。当用户更新个人计数时，总计数也应该更新。

 <div class="container">
 <div>TotalCount: <span class="total-count">1</span></div>
 <br/>
 <div class="adult">
   <div>Adult: <span class="adult-count">1</span></div>
   <span class="plus">+</span>
   <span class="minus disabled">-</span>
 </div>
 <div class="child">
   <div>Child: <span class="child-count">1</span></div>
   <span class="plus">+</span>
   <span class="minus disabled">-</span>
 </div>
 <div class="infant">
   <div>Infant: <span class="infant-count">1</span></div>
   <span class="plus">+</span>
   <span class="minus disabled">-</span>
 </div>

最大总数应为 9。我能够编写基本逻辑

fiddle 链接 - https://jsfiddle.net/wgk970uv/

但是对于以下要求，代码会变得复杂，

1. 成人人数上限为 9
2. 最大 child 人数应为(最大总人数 - 成人人数)
3. 婴儿数量上限应与成人数量相同

你能帮我解决这个问题吗？

Answer 1

您需要做的就是在减少任何成人/ child /婴儿类别时从所有 3 个类别中删除 disabled -

else if(adultCount<maxPeople){
         $('.infant .plus').removeClass('disabled');
         $('.child .plus').removeClass('disabled');
         $('.adult .plus').removeClass('disabled');
     }

fiddle here .

您的逻辑仍然可以进一步细化，以获得简短而清晰的代码。