javascript - 尝试获取标签 : $(this). 中的值 find ("").text()

Question

我想向每张卡添加事件，单击该事件将使计数器增加 1，最多为 3。我希望每张卡都有自己的计数器。

$(".bronze").mouseup(function(e){
    if (e.which === 1) {
        var counter = parseInt($(this).find(".bronze_counter").text(), 10)
        if (counter <= 3) {
            counter += 1
        }
    }

});

这是我的模板:

<div class="container">
    {% for card in cards %}
        {% if card.type == 'Silver' or card.type == 'Gold' %}
        <span class="gold"><img src="{{ card.thumbnail_link }}" style="width:5%"> [</span><span class="gold_counter">0</span><span>/1] </span>
        {% else %}
        <span class="bronze"><img src="{{ card.thumbnail_link }}" style="width:5%"> [</span><span class="bronze_counter">0</span><span>/3] </span>
        {% endif %}
    {% endfor %}
</div>

有什么提示为什么它不起作用吗？

Answer 1

这可能就是您想要的。

我添加了 alt="bronze" 仅用于示例。

由于您的 ".bronze_counter" 位于 ".bronze" 之后，而不是它的子级，因此您必须使用 .next() *

*为了证明这一点，请查看下面的 HTML，它将显示它不是子项。

<span class="bronze">
    <img src="{{ card.thumbnail_link }}" alt="bronze" style="width:5%">
    [
</span>
<span class="bronze_counter">
    0
</span>
<span>
    /3] 
</span>

您获得值 NaN 的原因是您使用了 .find()。 .find() 将在元素内部搜索。

工作演示

$(".bronze").click(function(e) {
  if (e.which === 1) {
    var counter = parseInt($(this).next(".bronze_counter").text(), 10)
    console.log(counter)
    if (counter < 3) {
      counter += 1
      $(this).next(".bronze_counter").text(counter)
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <span class="gold"><img src="{{ card.thumbnail_link }}" style="width:5%"> [</span><span class="gold_counter">0</span><span>/1] </span>
  <span class="bronze"><img src="{{ card.thumbnail_link }}" alt="bronze" style="width:5%"> [</span><span class="bronze_counter">0</span><span>/3] </span>
</div>