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

Question

我能够按整数(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()">

Answer 1

在没有用按钮替换链接的情况下，这段代码适用于上面的代码:

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()">