javascript - 试图在标签内获取值(value):$(this).find(“”).text()

我想将事件添加到每张卡上，单击后它将使计数器加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>

任何提示为什么它不起作用？

最佳答案

这可能是您想要的。

我仅为示例添加了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>