如何确定重复点击每一个元素？

Question

我有一堆点，我需要不可能重复点击这些点。

我使用数组，我在第一次点击后放置每个元素。然后我将clicked元素与该数组进行比较，但它不起作用，点击计数没有限制。

$(function(){ 

  var clickedDots = new Array();
  var dotsClick = 0;

  $('.dot').on('click',function(e){

    if(!clickedDots.includes($(this))) {
      dotsClick++; /* this variable must increase only once on each element click */
      clickedDots.push($(this));
      console.log(dotsClick);
    }
    else {
      return;
    }
  });    
});

Answer 1

您不需要添加$(this)对象，因为每个.dot DOM元素都与另一个不同。您可以在数组中搜索，例如，位置。为此，您应该使用.index()方法。

＆＃13;

＆＃13;

  var clickedDots = new Array();
var dotsClick = 0;
$('.dot').on('click',function(e){
    if(!clickedDots.includes($(this).index())) {
       dotsClick++; /* this variable must increase only once on each element click */
       clickedDots.push($(this).index());
       console.log(dotsClick);
    }
    else {
      return;
    }
});

＆＃13;

.dot{
   background-color:lightgrey;
   margin-top:10px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我发现在点击时向clicked添加.dot类是有益的，然后评估此类是否已存在。因为您正在使用类，所以您也可以轻松地将css应用于已单击的项目。

＆＃13;

＆＃13;

$('.dot').on('click', function(event) {
  if (!$(this).hasClass("clicked")) {
    $(this).toggleClass("clicked", true);
    console.log($('.dot.clicked').length);
  }
});

＆＃13;

.dot {
  background-color: lightgrey;
  margin-top: 10px;
}
.dot.clicked {
  background-color: red;
  margin-top: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>

＆＃13;

＆＃13;

＆＃13;

@ Zim84建议我应该使用属性而不是类，所以如果你对这种方法感兴趣，那么见下文：

＆＃13;

＆＃13;

$('.dot').on('click', function(event) {
  if (!$(this).attr('clicked')) {
    $(this).attr('clicked',true);
    console.log($(".dot[clicked]").length);
  }
});

＆＃13;

.dot {
  background-color: lightgrey;
  margin-top: 10px;
}
.dot[clicked] {
  background-color: red;
  margin-top: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>

＆＃13;

＆＃13;

＆＃13;