如果单击div计数会增加,我没有任何元素。同时单击其他div,第一个div计数将为0?

时间:2018-11-13 04:52:05

标签: javascript jquery frontend web-frontend

您可以存储[data] [1],每个元素计算每个元素被点击的次数。

$('.container').click(function() {
  if ($(this).data('count')) { // already been clicked
    $(this).data('count', $(this).data('count') + 1); // add one
  } else { // first click
    $(this).data('count', 1); // initialize the count
  }
  $(this).html($(this).data('count')); // show it
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">container</div>
<div class="container">container</div>
<div class="container">container</div>
<div class="container">container</div>
<div class="container">container</div>
<div class="container">container</div>

1 个答案:

答案 0 :(得分:0)

  1. 只需在第二次点击时将其他数据设置为0

$('.container').click(function() {

  if ($(this).data('count')) { // already been clicked
    
    $(this).data('count', $(this).data('count') + 1); // add one
  } else { // first click
    $('.container').not(this).data('count', 0);
    $(this).data('count', 1); // initialize the count
  }
  $('.container').each(function(i, v) {
    $(v).html($(v).data('count')); // show it
  })



});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">container</div>
<div class="container">container</div>
<div class="container">container</div>
<div class="container">container</div>
<div class="container">container</div>
<div class="container">container</div>