监视每个列表项获得的点击数

debugcn 发表于 Dev

约翰·里斯

<ul>
 <li>box</li>
 <li>box</li>
 <li>box</li>
 <li>box</li>
 <li>box</li>
</ul>


$(function(){
  var counter = 0;
  $('li').click(function(){
  if(counter > 0) {
    return false;
  } else {
    counter++;
  }
 });
});

我有这样的东西。单击列表项时，我的计数会增加，但是如果此列表项是新的，则单击过后，便开始以零递增。

https://jsfiddle.net/pzzzy97v/

添加一个类，以查看单击是否在同一元素上。

重置计数器

$(function() {
  var counter = 0;
  $('li').click(function() {
    if ($(this).hasClass('active'))
      counter++;
    else {
      $('li').removeClass('active');
      $(this).addClass('active');
      counter = 1;
    }
    $('span').html(counter);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li>box</li>
  <li>box</li>
  <li>box</li>
  <li>box</li>
  <li>box</li>
</ul>
<span></span>

每个项目的计数器

$(function() {
  $('li').data('count',0);
  $('li').click(function() {
    var thisCount = $(this).data('count');
    thisCount++;
    $(this).data('count',thisCount);
    $('span').html(thisCount);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li>box</li>
  <li>box</li>
  <li>box</li>
  <li>box</li>
  <li>box</li>
</ul>
<span></span>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。