Question

我正在尝试使用相同的点击事件来使用计数器来添加用户。此外，我有不同的a标签具有相同的类名。我想在我点击的标签上增加一次。谢谢！

<div class="card">
  <div class="card-content">
    <a href="#" class="sum"><i class="material-icons left">add</i></a>
    <p class="">Users <a class="clicks">0/20</a></p>
  </div><br><br>

  <div class="card-content">
    <a href="#" class="sum"><i class="material-icons left">add</i></a>
    <p class="">Users <a class="clicks">0/20</a></p>
  </div><br><br>

  <div class="card-content">
    <a href="#" class="sum"><i class="material-icons left">add</i></a>
    <p class="">Users <a class="clicks">0/20</a></p>
  </div>
</div>

var clicks = 0;
};

$(".sum").on("click", function() {
  clicks += 1;
  $(".clicks").html(clicks);
})

Answer 1

您可以使用$(this)获取所点击内容的元素。然后使用$(this).siblings("p").find("a")获取我们想要更新的元素。

我希望这是你正在寻找的。

＆＃13;

$('.sum').click(function() {
  var count = $(this).siblings("p").find("a").text().split('/');
  var currentcount = (parseInt(count[0]) + 1);
  var maxcount = count[1];
  if (maxcount >= currentcount) {
    $(this).siblings("p").find("a").text(currentcount + "/" + maxcount)
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<div class="card">
  <div class="card-content">
    <a href="#" class="sum"> <i class="material-icons left">add</i></a>
    <p class="">
      Users <a class="clicks">0/20</a>
    </p>
  </div>
  <br>
  <br>
  <div class="card-content">
    <a href="#" class="sum"><i class="material-icons left">add</i></a>
    <p class="">
      Users <a class="clicks">0/20</a>
    </p>
  </div>
  <br>
  <br>
  <div class="card-content">
    <a href="#" class="sum"><i class="material-icons left">add</i></a>
    <p class="">
      Users <a class="clicks">0/20</a>
    </p>
  </div>
</div>

</html>

＆＃13;

Answer 2

要实现此目的，您需要使用this来引用所点击的a元素。从那里，您可以使用siblings()和find()遍历DOM，以获取要更新其文本的a元素。

要使每个计数唯一，您需要在元素中剖析文本然后递增它。试试这个：

$(".sum").on("click", function() {
  var $target = $(this).siblings('p').find('a');
  var values = $target.text().split('/');
  
  var clicks = parseInt(values[0], 10);
  var limit = parseInt(values[1], 10);
  
  if (clicks < limit) {
    clicks++;
    $target.text(clicks + '/' + limit);
  }  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="card">
  <div class="card-content">
    <a href="#" class="sum"> <i class="material-icons left">add</i></a>
    <p class="">
      Users <a class="clicks">0/20</a>
    </p>
  </div>
  <br>
  <br>
  <div class="card-content">
    <a href="#" class="sum"><i class="material-icons left">add</i></a>
    <p class="">
      Users <a class="clicks">0/20</a>
    </p>
  </div>
  <br>
  <br>
  <div class="card-content">
    <a href="#" class="sum"><i class="material-icons left">add</i></a>
    <p class="">
      Users <a class="clicks">0/20</a>
    </p>
  </div>
</div>

针对不同的jQuery click事件标记相同的类名

2 个答案: