javascript - 将 var 设置为嵌套的 HTML 元素文本值

Question

所以我想从“toplevel”中获取“nested”的值，然后从“total”中减去它。我确定我的代码效率极低，请原谅。

HTML:

  <span class="toplevel"> 
    Clickable
    <span class="nested"> 50 </span>
</span> <br>

All put together is...
<div id="total">
  9999
</div>

JS:

$(document).ready(function() {
  var totalcp = parseInt("9999", 10);
  $('#total').text(totalcp).toString();
  $('.toplevel').click(function() {
      var cpcost = ('.nested');
    totalcp = totalcp - cpcost; 
    $('#total').text(totalcp).toString();
  });
});

我的主要问题是这条线:

var cpcost = ('.nested');

我知道我只是漏掉了一些愚蠢的东西!!!!提前致谢。

Codepen link - 在上述组合中，问题再次是 var cpcost 没有获得“嵌套”值。如果替换为固定数字，则效果很好。

Answer 1

You forgot to add $ in the following code:

var cpcost = ('.nested');

将其替换为以下代码应该可以工作:

var cpcost =parseInt( $(this).find('.nested').text() );

要在当前点击范围内查找.nested (.toplevel)，只需使用$(this)。通过这样做，您可以将查询限制为单击的元素。此外，要简单地查找特定元素，您可以使用 jQuery 中的 find 函数。