jQuery/JS将onClick按钮值添加到行中

jQuery / JS adding onClick button value into row

本文关键字：添加 按钮 JS onClick jQuery      更新时间：2023-09-26

我对JavaScript真的很陌生，所以我一直想用它做点什么。然而，我想当你按下X按钮时，它会将按钮值打印到div中。我想的是，如果你按下一个按钮，值为1，它会打印1到div，如果你按第二个按钮，则值为2，它会在1之后打印2。所以像12而不是3(就像下面我的JSFiddle(

我希望我能从这里得到帮助。

这是我的JSFiddle

JSFiddle

var theTotal = 0;
$('button').click(function(){
   theTotal = Number(theTotal) + Number($(this).val());
    $('.total').text(" "+theTotal);        
});
 
#codebar {
  background:black;
  width:150px;
  height:20px;
  padding: 20px 20px;
}
.total {
  color: red;
  font-weight:bold;
  font-size:50px;
  margin-top:-18px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="10">10</button>
<br>
<div id="codebar">
<div class="total"></div>
</div>

您应该将按钮.append() value作为string

$('button').click(function(){
    $('.total').append($(this).val());        
});

JSFiddle

事实上，您已经接近目标。你可以试试这个。

var theTotal = '';
$('button').click(function(){
  theTotal = theTotal + " " + $(this).val();
  $('.total').text(theTotal);        
});

我只是对你的代码做了一个简单的更改。

您应该使用.append((或concat而不是sum。。。但另一个最佳实践是使用数据属性而不是按钮值。

var theTotal = 0;
$('button').click(function() {
  var value = $(this).data('value');
  $('.total').append(value);
});
#codebar {
  background: black;
  min-width: 150px;
  height: 20px;
  padding: 20px 20px;
}
.total {
  color: red;
  font-weight: bold;
  font-size: 50px;
}
<button value="1" data-value="1">1</button>
<button value="2" data-value="2">2</button>
<button value="3" data-value="3">3</button>
<button value="4" data-value="4">4</button>
<div id="codebar">
  <div class="total"></div>
</div>

如果我们认为你的代码错误是…

var theTotal = 0;
$('button').click(function(){
   theTotal = Number(theTotal) +''+ Number($(this).val());
    $('.total').text(" "+theTotal);        
});

删除数字转换：

var theTotal = 0;
$('button').click(function(){
   theTotal = theTotal + $(this).val();
   $('.total').text(" "+theTotal);        
});

Try It Once

$(document).ready(function(){
 var a = 0; 
  $('button').click(function(){
   
 $(this).each(function(){
  a += $(this).text();
   
   $('.total').html(a);
 });
  });
});
 
#codebar {
  background:black;
  width:150px;
  height:20px;
  padding: 20px 20px;
}
.total {
  color: red;
  font-weight:bold;
  font-size:50px;
  margin-top:-18px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="10">10</button>

<div id="codebar">
<div class="total"></div>
</div>

相关文章：