时间戳

首页 > 解决方案 > 如何在每次单击按钮时添加一个数字并返回总数？

javascript - 如何在每次单击按钮时添加一个数字并返回总数？

问题描述

我得到了按钮，当单击它们时，它们返回当前并添加该数字，效果很好，但是带有 30 的按钮我想在第一次输出时返回 30，当再次单击以再次添加 30 时，输出为 60、90 , 120 ........

HTML

  <button data-value="1" class="numbs">1</button>
  <button type="button" data-value="2" class="numbs">2</button>
  <button type="button" data-value="3" class="numbs">3</button>
  <button type="button" data-value="4" class="numbs">4</button>
  <button type="button" data-value="30" class="numb">+30s</button>
  <input type="number" min="1" id="inputOutput">

JS/JQUERY

$(document).ready(function(){
   $('.numbs').click(function add(ev){
         var values =  ev.currentTarget.dataset.value;       
          console.log(values);
           var inputOutput = $('#inputOutput');
           var current = inputOutput.val();
           inputOutput.val(current + values);
           ev.stopPropagation();
       });
//for +30s button
 var $_30sec = $('.numb');
       var num ;
       var x  = 30;        
       $_30sec.click(function addthithy(ev){
            num = ev.currentTarget.dataset.value;
           var total  = Math.floor(num)+Math.floor(30);
           var inputOutput = $('#inputOutput');
//this prints out 30 only;
           var current = inputOutput.val(num);
          // console.log(num);
//this prints out 60 only;
          inputOutput.val(total);
           console.log(total);
       });
});

我实际上不知道如何在每次单击按钮时将增量添加到 30； 如果之前有人问过这个问题，但已经到处搜索但找不到我需要做的事情，请提前道歉；

标签： javascriptjquery

解决方案

使用以下代码更新您的代码

$(document).ready(function () {

        $('.numbs').click(function add(ev) {

            var values = ev.currentTarget.dataset.value;
            console.log(values);
            var inputOutput = $('#inputOutput');
            var current = inputOutput.val();
            inputOutput.val(current + values);
            ev.stopPropagation();

        });
        //for +30s button
        var $_30sec = $('.numb');
        var num;
        var x = 30;
        $_30sec.click(function addthithy(ev) {
            var inputOutput = $('#inputOutput');
            var clickCount = $(this).attr('click-count');
            inputOutput.val(parseInt(clickCount) * 30);
            var newClickCount = parseInt(clickCount) + 1;
            $(this).attr('click-count', newClickCount);

        });

    });

<button data-value="1" class="numbs">1</button>
<button type="button" data-value="2" class="numbs">2</button>
<button type="button" data-value="3" class="numbs">3</button>
<button type="button" data-value="4" class="numbs">4</button>
<button type="button" data-value="30" class="numb" click-count=1>+30s</button>
<input type="number" min="1" id="inputOutput">

推荐阅读