时间戳

首页 > 解决方案 > jQuery在单击和替换时附加值

javascript - jQuery在单击和替换时附加值

问题描述

我正在尝试将button文本附加到，span但它只显示button每个.item.

因此，无论button单击的文本是什么，append它都会span将该值替换为下一个按下的button文本，依此类推。

$(".list").on("click", ".button", function() {
  var x = $(this).closest(".item");
  var y = $(".button").text();
  $('#value').append('(' + y + ')');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="item">
    <div>Item 1</div>
    <button class="button">50</button>
  </div>
  <div class="item">
    <div>Item 2</div>
    <button class="button">30</button>
  </div>
  <div class="item">
    <div>Item 3</div>
    <button class="button">70</button>
  </div>
</div>
<span id="value">Total:</span>

标签： javascriptjquery

解决方案

我会像这样构建您的 html，然后定位跨度并使用.text(). 我像这样使用标签的<span>内部，<p>因为如果您尝试更新整个跨度标签，它也会删除total:文本。我还通过删除来稍微修剪一下 jquery，var x = $(this).closest(".item");因为在这种情况下我们不需要它（不确定它的用途）。

$('#value span').text(y);


$('.button').on('click', function() {
  var y = $(this).text();
  $('#value span').text(y);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="item">
    <div>Item 1</div>
    <button class="button">50</button>
  </div>
  <div class="item">
    <div>Item 2</div>
    <button class="button">30</button>
  </div>
  <div class="item">
    <div>Item 3</div>
    <button class="button">70</button>
  </div>
</div>
<p id="value">Total: (<span>0</span>)</p>

推荐阅读