使用jQuery增加和减少

时间:2018-10-20 07:03:04

标签: javascript jquery html

我正在对三个类别的值进行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。我能够编写基本逻辑

小提琴链接-https://jsfiddle.net/wgk970uv/

但由于以下要求,代码变得复杂,

1.最多可容纳9位成人
2.最大儿童人数应为(最大总人数-成人人数)
3.婴儿的最大数量应与成人的数量相同

请你帮我一下。

1 个答案:

答案 0 :(得分:1)

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

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

小提琴here

您的逻辑仍然可以进一步完善,以包含简短明了的代码。