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>

试图在标签内获取价值：$（this）.find（“”）。text（）

1 个答案: