javascript - 每次在 jquery 中单击按钮时如何使输入添加值？

Question

我有按钮可以单击，当它被单击时，我希望该值增加被单击的相同值； 这是我的 html

          <div  id="setTimer">
                <div class="spans">
                  <span   class="timeSet" >1</span>
                  <span  class="timeSet">2</span>
                  <span  class="timeSet">3</span>
                  <span  class="timeSet">4</span>
                </div>
                <div class="spans">
                    <span  class="timeSet">5</span>
                   <span  class="timeSet">6</span>
                   <span  class="timeSet">7</span>
                   <span  class="timeSet">8</span>
                </div>
                <div class="spans">
                    <span  class="timeSet">9</span>
                    <span  class="timeSet">0</span>
                    <span  class="timeSet">+30s</span>
                </div>             
            </div>

JavaScript

$(document).ready(function(){
        var count = 0
        var btnCountOutput = $('#btnCountOutput');
    var txt = $(this);
    $('.timeSet').click(function(txt){
        count++;
        if(count > 3){
            console.log('that cant be done!');
            return false;
        }
        var output = txt.currentTarget.innerHTML;
        output++;
        var num = parseFloat(output);
        var inputOut = btnCountOutput.val(num);
        console.log(num);
        console.log(count);
    });
});

输出的 HTML

<div class="timeCount">
    <input type="text" placeholder="Buttonclick Counter" class="col" 
     id="btnCountOutput">

需要时使用 CSS

#setTimer .spans{
margin-bottom: 10px;
  }
 #setTimer span{
   width: 15px;
   height: 10px;
   border-radius:50%;
   background: white;
   text-align: center;
   padding: 4px;
   cursor: pointer;
}

嗯，就像 Java Script 一样，我可以在其中编写；

  btnCountOutput.value += num;

每次单击按钮时，只需在输出中添加任何被单击的值

Answer 1

您需要获取文本框的值，然后将其与您传入的数字相加。相加后，您可以再次设置文本框的值。例如，我添加了一个名为 currentCount 的变量:

https://jsfiddle.net/mswilson4040/487eaopt/

$(document).ready(function() {
  var count = 0
  var btnCountOutput = $('#btnCountOutput');
  var txt = $(this);
  $('.timeSet').click(function(txt) {
    count++;
    if (count > 3) {
      console.log('that cant be done!');
      return false;
    }
    var output = txt.currentTarget.innerHTML;
    output++;
    var num = parseFloat(output);
    var currentCount = btnCountOutput.val(); // Grab the current value
    var inputOut = btnCountOutput.val(+num + +currentCount); // Add the two values together and set the text box (make sure to convert string to number)
    console.log(num);
    console.log(count);
  });
});

您也不需要 parseFloat 函数。您确实需要一些函数来确保将字符串转换为数字，但您需要 Number、parseInt 或 +。除非您使用十进制值，否则不需要 parseFloat。