Question

我是JavaScript的新手，所以我一直在寻找用它做点什么。但是，当你按下X按钮时，我想将它打印到div中。想想我想要的是，如果你按一个按钮，值为1，它将打印1到div，如果按第二个按钮，该值为2，它将在1之后打印2.所以像12而不是3（如在我的JSFiddle在下面）

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

这是我的JSFiddle

JSFiddle

＆＃13;

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

＆＃13;

#codebar {
  background:black;
  width:150px;
  height:20px;
  padding: 20px 20px;
}

.total {
  color: red;
  font-weight:bold;
  font-size:50px;
  margin-top:-18px !important;
}

＆＃13;

<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>

＆＃13;

Answer 1

您应该.append()按钮value为字符串

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

JSFiddle

Answer 2

删除号码转换：

var theTotal = 0;

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

Answer 3

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

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

我只需对您的代码进行简单的更改。

Answer 4

您应该使用.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);        
});

Answer 5

尝试一次

$(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>

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

5 个答案: