Question

我无法弄清楚为什么这不起作用。我正试图让一个简单的计数器工作。当用户单击“是”时，我想将隐藏文本框的值增加1.目前，当我单击“是”时，文本框的值将更改为“102”，附加文本将显示为“101102”。有什么想法吗？

这是我正在使用的代码：

var yesValue  = parseInt($("#trend-one-yes").val());
$("#trend-one-yes").val(yesValue+1);

var $addDiv = $('#yes');
$addDiv.append($("#trend-one-yes").val());

更新

我添加了一些建议的代码。它仍然输出错误的数字。它应该增加1而不是增加2.谢谢你的帮助！

<div id="vote" class="animated" data-fx="slideInDown">   
  <div class="vote-w">
  <div class="vbut" id="yes"><div>&#xe0fe;</div><div class="tag">Yes</div></div>
  <div class="vbut" id="no"><div>&#xe0fd;</div><div class="tag">No</div></div>
</div>

<div  id="results">
  <div class="res" id="yesNum"></div>
  <div class="res" id="noNum"></div>                    
  <form id="vals" method="post" action="data/save.php" target="sub">
    <input id="trend-one-yes" name="trend-one-yes" 
           value="<?php echo $survey->one->yes?>"/>
    <input id="trend-one-no" name="trend-one-no" 
           value="<?php echo $survey->one->no?>"/>                    
  </form>
  <iframe id="sub" frameborder="0" name="sub" 
          style="height:1px; width:1px;"></iframe>
</div>

脚本

<script>
  $("#yes").mouseup(function()
    {
      $(this).css("color","#ffffff");
      $('#results').slideDown({ duration: 1000, easing: "easeOutBounce" });
      var $tyes = $("#trend-one-yes");
      var count = parseInt($tyes.val(), 10) + 1
      $tyes.val(count);
      var $addDiv = $('#yesNum').text(count);
      $( "#vals" ).submit();
    });
</script>

尝试下面添加的代码。再次感谢，但它仍然添加2而不是一个。怎么会这样？

Answer 1

您不是使用新值更新#yes元素，而是将新值附加到现有元素。使用.html（）将现有值替换为新值

var $tyes = $("#trend-one-yes");
var count = parseInt($tyes.val(), 10) + 1
$tyes.val(count);

var $addDiv = $('#yes').text(count);

Answer 2

您需要替换节点值而不是追加

$addDiv.html($("#trend-one-yes").val());

Answer 3

回顾问题

如果表单字段值为101，如何在单击元素后将其增加1？
为什么我的代码会将值设置为101102，而不是将值更改为102？
为什么我的更新代码会将值增加2而不是将其增加1？

问题1 您必须确保获得的值为number类型如果你看一下jQuery docs for val，你可以看到val返回一个String或一个数字或一个数组。所以你必须确保把它变成一个数字。要获得点击次数，您可以使用parseint 1，2。

// get the value from <input id=trend-one-yes type=??? <-- i assume type=text?
var yesCount = parseint($("#trend-one-yes").val(), 10); 
// increase value by 1 and write it back into the field
yesCount = yesCount  +1;
$("#trend-one-yes").val(yesCount);

问题2 是因为您使用了jQuery append()而不是val()。问题How do I add an integer value with javascript (jquery)包含其他信息。

var $addDiv = $('#yes'); // get a reference to <div id=yes>
// append is the wrong function --> $addDiv.append($("#trend-one-yes").val());

// the newYesCount will be increased by one after a certain user action
var newYesCount = GetNewYesCount(yesCount);
$addDiv.val(newYesCount);

问题3的更新3

能够帮助我需要更多信息。我相信你想要这个：

yesCount的初始值为101，来自<input id="trend-one-yes"
用户点击<div id="yes">后，值yesCount（101）增加1
并将新值（101 + 1 = 102）写入<div id="yesNum">

您的代码显示，<div id=yes附加了mouseup事件：

$("#yes").mouseup(function()
{
   // i assume get yes count from <input id="trend-one-yes
   var yesCount = GetCurrentYesCount();
   // increase yesCount by 1 after a certain user action
   var newYesCount = GetNewYesCount(yesCount);
   // write newYesCount into another form field
   // i assume <div class="res" id="yesNum">
});

以下可能是您遇到麻烦的原因

元素混淆

event bubbling

mouseup会触发两次
可能是附加了几个事件侦听器，并且您的函数mouseup触发两次或另一个函数增加1次触发。查看 how to see which event listeners are bound to an element
或者，如果选中复选框，您可能希望增加1。这意味着如果选中了复选框，则仅增加1。

帮助我们帮助您

如果你可以分叉

my third codepen example
或my 4th. codepen

这样就可以显示您的用例，我可以提供帮助。

将1添加到输入字段

更新

3 个答案:

问题3的更新3

帮助我们帮助您