How to track clicks on a specific element?

Question

css

There is a map with location points on it. All points have the same general class "mark". I'm trying to make it so that when you click on a dot, the "active" class is added to it and the subtab appears. Here is the code:

$(function(){
  $('.mark').click(function(){
    if($('.mark.active').length < 1){
      $('.mark').addClass('active');
      $('.tooltip').fadeIn();
    } else {
      $('.mark').removeClass('active');
      $('.tooltip').fadeOut();
    }
  });
});

Everything seems to work, but only when you click on one point, all points are activated. How can I make it understand that I am clicking on a specific element?

Answer 1

.category-desc {
    position: relative;
}

.page-header.item-title {
    position: absolute;
    bottom: 60px;
    left: 10px;
}

Answer 2

event.target

Answer 3

You can use e.target or this:

$(function(){
  $('.mark').click(function(){
    var $mark = $(this); // или $(e.target)

    if(!$mark.hasClass('active')) {
      $mark.addClass('active');
      $('.tooltip').fadeIn();
    } else {
      $mark.removeClass('active');
      $('.tooltip').fadeOut();
    }
  });
});

Can be redone using .toggleClass()