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

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

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

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

无论哪种方式，祝你好运！