Set Max Increment jQuery-CodePudding

I am using buttons to increment a control that shows the count of tabs. The maximum limit for #clickedTab needs to be 6.

Decreasing works fine and stops at 1. incrementing should stop at 6.

I am using below code:

jQuery(document).ready(function($) {
  //ARROW CONTROLS
  $("#prevtab").click(function() {
    $('#clickedTab').html(function(i, val) {
      return val * 1 <= 1 ? 1 : val * 1 - 1
    });
  });
  $("#nexttab").click(function() {
    $('#clickedTab').html(function(i, val) {
      return val * 1   1
    });
  });
});

#clickedTab { display:inline }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <button id="prevtab" >prev</button>
  <span ><div id="clickedTab">1</div>/6</span>
  <button id="nexttab" >next</button>
</div>

CodePudding user response：

val < 6 ? val * 1 1 : val

If val lower then 6 then val * 1 1 else just val.

jQuery(document).ready(function($) {
  //ARROW CONTROLS
  $("#prevtab").click(function() {
    $('#clickedTab').html(function(i, val) {
      return val * 1 <= 1 ? 1 : val * 1 - 1
    });
  });
  $("#nexttab").click(function() {
    $('#clickedTab').html(function(i, val) {
      return val < 6 ? val * 1   1 : val
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <button id="prevtab" >-</button>
  <span ><div id="clickedTab">1</div>/6</span>
  <button id="nexttab" > </button>
</div>