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

Posted 2023-05-08

【中文标题】Javascript增加和减少按钮为2、5和10的倍数

【英文标题】：Javascript increase and decrease button to be multiple of 2, 5 and 10

【发布时间】：2019-12-15 08:14:31

【问题描述】：

我的 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"  />
  </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"  />
    </button>
    <input type="text" name="name" value="1">
    <button class="minus-btn" type="button" name="button">
      <img src="minus.svg"  />
    </button>
  </div>

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

【问题讨论】：

if (value & amp; gt; 1) 应该是if (value > 1)

只需将value + 1 更改为value + 5 以增加5。有什么问题？

woha 抱歉，我编辑了 OP 的代码修复实体，请问有人可以取消吗？

你刚刚提出了一个编辑请求，我拒绝了它，但是有人批准了，所以需要再拒绝一次

@CalvinNunes 谢谢

【参考方案1】：

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

请记住，如果您将来从某个地方复制代码 sn-p，您应该在使用它之前尝试了解它的作用（每一行！）。

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

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

无论如何，祝你好运！

【讨论】：

仅仅对值进行更改并不能解决正在发生的语法问题。 （运行 OPs sn-p 来查看）

我认为语法错误可能是由于 (value & amp; lt; 100) 而不是 (value > 100) 但我无法编辑更改，因为其他编辑正在等待中，并且该编辑对于

是的，语法错误是这样的，我建议你在你的答案中添加这个修复（解释原因），让它更完整，我会投票赞成

@CalvinNunes 我认为这是 SO 粘贴的问题，但它实际上可能是主要问题。我已经在答案的顶部添加了这一点。