Question

我有一个JS问题我试图解决。功能应该是这样的......

点击值1，显示值。单击值2，将当前值添加到值1。（value1 = 9 + value2 = 8，总共17）。单击值3，添加值1和2 ......依此类推，直到选中所有5个数字。

但是，我希望能够取消选择数字（切换）并减少总金额。

这是我目前的代码。

＆＃13;

$(".start-count-1").on("click", function(evt) {
  var $el = $(".increment-number"),
    value = 9;

  evt.preventDefault();

  $({
    percentage: 0
  }).stop(true).animate({
    percentage: value
  }, {
    duration: 500,
    step: function() {
      // percentage with 1 decimal;
      var percentageVal = Math.round(this.percentage * 10) / 10;

      $el.text(percentageVal + '%');
    }
  }).promise().done(function() {
    // hard set the value after animation is done to be
    // sure the value is correct
    $el.text(value + "%");
  });
});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    0% should incraese (add 9 + 8 + 4) and decrease when buttons clicked again.
    <p class="s2-total center increment-number">0%</p>
  </div>


  <div class="row text-center">
    <div class="col-lg-3">
      <p class="s2-percents-1">9%</p>
    </div>
    <div class="col-lg-2">
      <p class="s2-percents-2">8%</p>
    </div>
    <div class="col-lg-2">
      <p class="s2-percents-3">4%</p>
    </div>

  </div>
  <div class="row text-center">
    <div class="col-lg-3 p-0 s2-selections">
      <button class="s2-btn1 start-count-1">9 +</button>
    </div>
    <div class="col-lg-2 p-0 s2-selections">
      <button class="s2-btn2 start-count-2">8 +</button>
    </div>
    <div class="col-lg-2 p-0 s2-selections">
      <button class="s2-btn3 start-count-3">4 +</button>
    </div>

    Subtract number when clicked again...
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  </div>
</body>

</html>

＆＃13;

我目前只有9值工作。我该怎么做才能实现我所寻找的目标？是否已经建立了我可以参考的东西？

Answer 1

几点：

选择器.start-count-1仅适用于班级start-count-1，因此忽略其他按钮。
您已使用value = 9;修复了函数中的值9，因此即使您拥有正确的选择器，增量也始终为9。
当您点击8+等按钮时，该功能无法知道数字8或9或4。

您可以尝试使用选择器[class*=start-count-]选择包含start-count-的类的所有内容，然后为每个按钮设置相应的值，例如

<button class="s2-btn1 start-count-1" value=9>9 +</button>

然后您还可以使用以下命令修改您的函数以获取单击按钮的值：

value = $(this).val();

最后你可以比较这个值是否等于当前递增的值增加或减少。类似的东西：

if($el.val()==value){
  // here i just set the text to 0%, you could implement a decrement here, or use some other mechanism to if-else the entire logic
  $el.text(0 + "%"); 
return;}

可以在此Codepen

这只是为了涵盖答案开头所述的要点。任何修改，美化和逻辑改进都是供您实施的，当然您可以再次提出疑问。

---编辑--- 要添加切换功能以在单击按钮时添加/减去，您可以添加其他数据属性进行存储，并检查是否为“添加”。

示例代码转换here

单击

1 个答案: