CODEWITHSUNDEEP
javascriptjqueryhtml
user1153484
user1153484

Reputation: 195

Increment and Decrement using jquery

I am doing an increment and decrement of values by 1 on three categories. when ever the user updates the individual counts, total count should also be updated. 

 <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>

Maximum total count should be 9. I am able to write the basic logic

fiddle link - https://jsfiddle.net/wgk970uv/

but the code gets complicated for the below requirements,

1. Maximum adult count can be 9
2. Maximum child count should be ( Maximum total count - adult count )
3. Maximum infant count should be same as adult count

could you please help me on this.

Upvotes: 0

Views: 158

Answers (1)

Rajeev Ranjan
Rajeev Ranjan

Reputation: 4076

All you need to do is remove disabled from all the 3 whenever decrementing any of the categories adult/child/infant -

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

The fiddle here.

Your logic could still be refined further to have a short and crisp code.

Upvotes: 1

Related Questions