如何通过其值jquery增加一个数字答案

【问题标题】：How to increment a number by its value jquery如何通过其值jquery增加一个数字
【发布时间】：2019-09-02 02:56:56
【问题描述】：

我有一个按钮，当单击它时，它应该采用一个随机数，并在单击按钮时将其原始值添加回其当前值。例如，如果随机数 (var diamondGuess) 为 10，则数字 10 首先出现在 div (id="d-num-test") 中。每当您单击按钮时，应将 10 添加到 div 中显示的数字值。随机数函数在回合重置之前不会选择新的随机数。

因此，如果我从 10 开始并单击按钮，则页面上的 div id="d-num-test" 应更改为 20。再次单击它是 30，然后是 40，等等......我尝试研究各种运算符和数学方法，但我得到的最接近的是 +=。如果 10 不是随机选择，这将起作用。我尝试使用变量本身 +=，但它以指数方式加倍（使用上面的示例为 10、20、40、80）。

任何建议将不胜感激！新手来了

谢谢！奥利弗

$(document).ready(function() {

  var diamondNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  var diamondGuess = diamondNum[Math.floor(Math.random() * diamondNum.length)];
  var diamondNumDom = $('#d-num-test');
  diamondNumDom.text(diamondGuess);

  $('#diamond').on("click", function() {
    diamondNumDom.text(diamondGuess += diamondGuess);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="d-num-test"></div>
<button id="diamond"></button>

【问题讨论】：

标签： javascript jquery onclick increment

【解决方案1】：

为防止覆盖您的diamondGuess 值，您需要引入一个附加变量（下面的 sn-p 中的diamondValue）来跟踪当前值：

$(document).ready(function() {
  var diamondNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  var diamondGuess = diamondNum[Math.floor(Math.random() * diamondNum.length)];
  var diamondValue = diamondGuess;
  var diamondNumDom = $('#d-num-test');
  
  diamondNumDom.text(diamondValue);

  $('#diamond').on("click", function() {
    diamondValue += diamondGuess;
    diamondNumDom.text(diamondValue);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="d-num-test"></div>
<button id="diamond"></button>

【讨论】：

【解决方案2】：

下面是一个 VanillaJS（无 jQuery）示例，说明如何完成此操作。您的逻辑中的一个问题是diamondGuess += diamondGuess，这意味着猜测会成倍增加（正如您所经历的那样）。

您可以通过使用 textContent 的值来避免这种情况，或者像我在下面所做的那样使用数据属性。因为 data-* 属性存储一个字符串，所以我使用一元加号（+ 前缀）将字符串转换为数值（如 +numBox.dataset.value + +numBox.dataset.guess 所示）。

这种方法的好处在于它将猜测和值与元素结合起来。通过一些工作，您可以将ids 转换为class 和其他一些最小的调整，并且您可以在同一页面上拥有独立的计算器。

var diamondNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let numBox = document.querySelector('#d-num-test');

// Initialize values & attach guess to element
numBox.dataset.guess = diamondNum[Math.floor(Math.random() * diamondNum.length)];
numBox.dataset.value = numBox.dataset.guess;
numBox.textContent = numBox.dataset.guess;


// Click Event
document.addEventListener('click', function(e) {
  if (e.target.matches('#diamond')) {
    let numBox = document.querySelector('#d-num-test');
    numBox.dataset.value = +numBox.dataset.value + +numBox.dataset.guess;
    numBox.textContent = numBox.dataset.value;
  }
}, false);

<div id="d-num-test"></div>
<button id="diamond">Diamond</button>

【讨论】：