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

Question

我有一个按钮，当单击它时，它应该采用一个随机数，并在单击该按钮时将其原始值添加回其当前值。 例如，如果随机数 (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>

Answer 1

为了防止覆盖你的diamondGuess值，你需要引入一个额外的变量（下面代码段中的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>

Answer 2

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

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

这种方法的好处是它将猜测和值耦合到元素。 只需稍加工作，您就可以将id转换为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>