<h3> 标签内的数字加 1

Question

我有多个（不知道有多少，因为它可以改变）<h3> 标签具有相同的 class .love_nummer

<h3 class="love_nummer">1</h3>

这些标签内有一个数字，每个 .love_nummer 都带有另一个带有 class 的标签。give_love

<h3 class="give_love">LOVE</h3>

现在，当您单击 .give_love 时，我只想在与 .give_love 变成高一个数。这是我目前所拥有的，但它不起作用：

$('.give_love').on("click", function(e){
      var love_givin = parseInt($(this).parent().find('.love_nummer').val());
      love_givin++;
    });

Answer 1

刚刚注意到您使用了.val()获取文本，无法使用。相反，您应该使用 .text().

您需要替换为：

$('.give_love').on("click", function(e) {
  var love_givin = parseInt($(this).parent().find('.love_nummer').text());
  $(this).parent().find('.love_nummer').text(++love_givin);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="love_nummer">1</h3>

<h3 class="give_love">LOVE</h3>

Answer 2

val() 适用于具有 值的元素 属性，h3 不是这样的元素。请尝试 text()，不要忘记之后更新它：

$('.give_love').on("click", function(e) {
  var element = $(this).parent().find('.love_nummer');
  var love_givin = parseInt(element.text());
  love_givin++;
  element.html(love_givin.toString());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3 class="love_nummer">1</h3>
<h3 class="give_love">LOVE</h3>

Answer 3

试试这个只会增加之前文本的数量

$('.give_love').on("click", function(e) {
var love_num=$(this).prev('.love_nummer');  
var love_givin = parseInt(love_num.text());
  love_num.text(++love_givin);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="love_nummer">1</h3>

<h3 class="give_love">LOVE</h3>

Answer 4

好吧，看起来您在计算值后没有执行任何更新操作。另外，在我看来，由于您使用的是 <h> 标签，因此使用 .text() 比使用 .val() 更好。

$('.give_love').click(function(e) {
  var love_givin = parseInt($(this).parent().find('.love_nummer').text());
  love_givin++;
  $(this).parent().find('.love_nummer').text(love_givin);
});

这是一个工作示例：

https://jsfiddle.net/v35f6mpw/2/

<h3> 标签内的数字加 1

add 1 to number within <h3> tag

html

jquery

numbers