javascript - 将选择输入字段限制为0、3、5和8

我能够通过整数（除0之外）增加/减少数量，将该数量乘以给定的价格，并通过复选框在总计中添加一个值，然后将其全部输出为总计。到目前为止，一切都很好。

我当前的挑战是将增量/减量限制为0、3、5、8。

我认为我将不得不更改以下部分（或将其完全省略）以解决0，但其余部分则碰壁：

else {

        if (currentNb > 1) {
            newNb = parseFloat(currentNb) - 1;
        } else {
            newNb = 1;
            button.addClass('inactive');
        }

这是我到目前为止的代码：

var _EXTRAVAL = 1;

$(".incr-btn_mobile").on("click", function(e) {
  // Prevent default action
  e.preventDefault();

  // Set variable for the method
  var button = $(this);
  var labelNb = button.parent().find('.quantity');
  var labelPrice = $("#" + button.attr('data-target'));
  var currentNb = button.parent().find('.quantity').val();
  var newNb = 0;

  // Remove 'inactive' class
  $('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');

  // Increase or decrease
  if (button.attr('data-action') == "increase") {
    newNb = parseFloat(currentNb) + 1;
  } else {

    if (currentNb > 1) {
      newNb = parseFloat(currentNb) - 1;
    } else {
      newNb = 1;
      button.addClass('inactive');
    }
  }


  var isExtra = $("#include").prop('checked') ? _EXTRAVAL : 0;
  $(labelNb).val(newNb);
  $(labelPrice).css('display', 'block').html("=  $" + String((((newNb) * 7.99) + (isExtra)).toFixed(2)));

});


$("#include").on('click', function() {
  // Set variable for method
  var checkbox = $(this);
  var labelPrice = $("#" + $(".incr-btn_mobile").attr('data-target'));
  var labelPriceFloat = parseFloat(labelPrice.html().substring(4));

  // If checkbox is check, increse price
  if (checkbox.prop('checked')) {
    labelPrice.html("=  $" + String((labelPriceFloat + _EXTRAVAL).toFixed(2)));
  } else {
    labelPrice.html("=  $" + String((labelPriceFloat - _EXTRAVAL).toFixed(2)));
  }
});

.bg {
  width: 100%;
}

.column {
  float: left;
  width: 50%;
  padding: 10px;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.count-input_mobile {
  position: relative;
  max-width: 1000%;
  max-width: 400px;
  margin-top: 10px;
  text-align: center;
}

.count-input_mobile input {
  width: 100%;
  height: 42px;
  border: 1px solid #000 border-radius: 2px;
  background: none;
  text-align: center;
}

.count-input_mobile input:focus {
  outline: none;
}

.count-input_mobile .incr-btn_mobile {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 0;
  margin-top: -15px;
  text-decoration: none;
}

.count-input_mobile .incr-btn_mobile:first-child {
  right: auto;
  left: 0;
  top: 46%;
}

.count-input_mobile.count-input-sm {
  max-width: 125px;
}

.count-input_mobile.count-input-sm input {
  height: 36px;
}

.count-input_mobile.count-input-lg {
  max-width: 200px;
}

.count-input_mobile.count-input-lg input {
  height: 70px;
  border-radius: 3px;
}

.button_mobile {
  border: 1px solid #000;
  border-radius: 2px;
  background: none;
  padding: 10.5px;
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<input class="checkbox_align_1" style="width:20px;height:20px;" type="checkbox" id="include" name='include' data-target="cleanse_drop_1" />


<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" data-target="cleanse_drop_1" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="0" />
  <a class="incr-btn_mobile" data-action="increase" data-target="cleanse_drop_1" href="#">+</a>
</div>

<div id="cleanse_drop_1">= $ 0.00</div>

<input type="button" class="button_mobile" value="Add" onclick="addToCart()">

最佳答案

尚未用按钮替换链接，此代码适用于以上代码：

var _EXTRAVAL = 3;

$(".incr-btn_mobile").on("click", function(e) {
    // Prevent default action
    e.preventDefault();

    // Set variable for the method
    var button = $(this);
    var labelNb = button.parent().find('.quantity');
    var labelPrice = $("#" + button.attr('data-target'));
    var currentNb = button.parent().find('.quantity').val();
    var newNb = 0;

    // Remove 'inactive' class
    $('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');

    // Increase or decrease
    if (button.attr('data-action') == "increase") {
	  if ((currentNb) >= 8 ){
	  // nichts machen
	  }else{
		  if ((currentNb == 0)||(currentNb == 5)){
			newNb = parseFloat(currentNb) + 3;
		  }else if((currentNb == 3)){
			newNb = parseFloat(currentNb) + 2;
		  }

	  }

    }

    if (button.attr('data-action') == "decrease") {
	  if ((currentNb) <= 0 ){
	  // nichts machen
	  }else{
		  if ((currentNb == 8)||(currentNb == 3)) {
			newNb = parseFloat(currentNb) - 3;
		  }else if((currentNb == 5)){
			newNb = parseFloat(currentNb) - 2;
		  }

	  }

    }


    var isExtra = $("#include").prop('checked') ? _EXTRAVAL : 0;
    $(labelNb).val(newNb);
    $(labelPrice).css('display', 'block').html("=  $" + String((((newNb) * 7.99) + (isExtra)).toFixed(2)));

});

.bg {
  width: 100%;
}

.column {
  float: left;
  width: 50%;
  padding: 10px;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.count-input_mobile {
  position: relative;
  max-width: 1000%;
  max-width: 400px;
  margin-top: 10px;
  text-align: center;
}

.count-input_mobile input {
  width: 100%;
  height: 42px;
  border: 1px solid #000 border-radius: 2px;
  background: none;
  text-align: center;
}

.count-input_mobile input:focus {
  outline: none;
}

.count-input_mobile .incr-btn_mobile {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 0;
  margin-top: -15px;
  text-decoration: none;
}

.count-input_mobile .incr-btn_mobile:first-child {
  right: auto;
  left: 0;
  top: 46%;
}

.count-input_mobile.count-input-sm {
  max-width: 125px;
}

.count-input_mobile.count-input-sm input {
  height: 36px;
}

.count-input_mobile.count-input-lg {
  max-width: 200px;
}

.count-input_mobile.count-input-lg input {
  height: 70px;
  border-radius: 3px;
}

.button_mobile {
  border: 1px solid #000;
  border-radius: 2px;
  background: none;
  padding: 10.5px;
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<input class="checkbox_align_1" style="width:20px;height:20px;" type="checkbox" id="include" name='include' data-target="cleanse_drop_1" />


<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" data-target="cleanse_drop_1" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="0" />
  <a class="incr-btn_mobile" data-action="increase" data-target="cleanse_drop_1" href="#">+</a>
</div>

<div id="cleanse_drop_1">= $ 0.00</div>

<input type="button" class="button_mobile" value="Add" onclick="addToCart()">