Javascript增加和减少按钮是2、5和10的倍数

Question

我的 Javascript 似乎无法正常工作。我的增加和减少按钮不起作用，我想知道如何使其中一些按钮仅适用于 2、5 或 10 的倍数。(5 的倍数示例:我只能订购 5、10、15.. 所以增加和减少按钮只能相应地增加。)

我有 7 种产品，都与这一款相似，只是名称、价格和图片不同。

$('.like-btn').on('click', function() {
  $(this).toggleClass('is-active');
});

$('.minus-btn').on('click', function(e) {
  e.preventDefault();
  var $this = $(this);
  var $input = $this.closest('div').find('input');
  var value = parseInt($input.val());

  if (value > 1) {
    value = value - 1;
  } else {
    value = 0;
  }

  $input.val(value);

});

$('.plus-btn').on('click', function(e) {
  e.preventDefault();
  var $this = $(this);
  var $input = $this.closest('div').find('input');
  var value = parseInt($input.val());

  if (value < 100) {
    value = value + 1;
  } else {
    value = 100;
  }

  $input.val(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="buttons">
    <span class="delete-btn"></span>
    <span class="like-btn"></span>
  </div>

  <div class="image">
    <img src="item-3.png" alt="" />
  </div>

  <div class="description">
    <span>Super Star Destroyer</span>
    <span>Brown</span>
  </div>

  <div class="quantity">
    <button class="plus-btn" type="button" name="button">
      <img src="plus.svg" alt="" />
    </button>
    <input type="text" name="name" value="1">
    <button class="minus-btn" type="button" name="button">
      <img src="minus.svg" alt="" />
    </button>
  </div>

  <div class="total-price">$4570000</div>
</div>

Answer 1

首先，修复语法错误:
(value & amp; lt; 100)应该是 (value < 100)和
(value & amp; gt; 1)应该是 (value >= 1) .

请记住，如果您从某处复制代码片段，您应该在使用它之前尝试了解它的作用(每一行!)。

你可以使用 <input name="myName" type="number" step="5">在您的 HTML 中，作为一种解决方案。这可能会帮助您以简洁的方式解决眼前的问题。

或者，在说 value = value + 1; 的行中和 value = value - 1;您可以将 1 更改为 5(或在文件顶部定义一次名为 STEP_SIZE 的常量)。此策略可能会帮助您更多地了解 Javascript 并提高您的编程技能。

无论如何，祝你好运!