CODEWITHSUNDEEP
javascriptjquery
Ustym Rado
Ustym Rado

Reputation: 13

How to determine repeated click on each of a bunch of elements?

I have a bunch of dots and I need to do impossible repeated click on each of these dots.

I use array, where I put each element after first click on it. And then I compare clicked element with that array, but it doesn't work, clicks are counting with no limit.

$(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;
    }
  });    
});

Upvotes: 1

Views: 53

Answers (2)

Zze
Zze

Reputation: 18805

I find that it can be beneficial to add a clicked class to the .dot on click, and then evaluate whether or not this class already exists. Because you are using a class, you can also apply css easily to those items which have been clicked.

$('.dot').on('click', function(event) {
  if (!$(this).hasClass("clicked")) {
    $(this).toggleClass("clicked", true);
    console.log($('.dot.clicked').length);
  }
});
.dot {
  background-color: lightgrey;
  margin-top: 10px;
}
.dot.clicked {
  background-color: red;
  margin-top: 10px;
}
<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>

@Zim84 suggested that I should use an attribute instead of a class, so if your interested in that approach, then see below:

$('.dot').on('click', function(event) {
  if (!$(this).attr('clicked')) {
    $(this).attr('clicked',true);
    console.log($(".dot[clicked]").length);
  }
});
.dot {
  background-color: lightgrey;
  margin-top: 10px;
}
.dot[clicked] {
  background-color: red;
  margin-top: 10px;
}
<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>

Upvotes: 1

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48367

You do not need to add $(this) object, because every .dot DOM element is different from another. You can search in array, for instance, the position. For this, you should use .index() method.

  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;
    }
});
.dot{
   background-color:lightgrey;
   margin-top:10px;
}
<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>

Upvotes: 1

Related Questions