Как отследить нажатие на конкретный элемент?

Question

[Расул Гитинов]

Есть карта с точками локаций на ней. У всех точек один и тот же общий класс "mark". Пытаюсь сделать так, чтобы при нажатии на точку, к ней добавлялся класс "active" и вложенная вкладка появлялась. Вот код:

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

Все вроде как работает, но только при нажатии на одну точку, активируются все точки. Как сделать так, чтобы она понимала, что я нажимаю именно на конкретный элемент?

Answer 1

[Robert Bl]

event.target

Comments

[Расул Гитинов]

Не помогло

[Robert Bl]

Расул Гитинов: Может я неправильно задачу понял. Вам нужно узнать кто вызвал событие?

[Расул Гитинов]

Robert Bl: У меня примерно 30 точек на карте с классом "mark" и при нажатии на одну активируются все. Я хочу, чтобы активировалась именно та точка, на которую я нажал, а все остальные не реагировали

[Robert Bl]

Расул Гитинов:

$('.mark').addClass('active');// вам здесь нужно this поставить
$(this).addClass('active'); //вот так

[Расул Гитинов]

Robert Bl: Сделал. Все равно не помогло. Все также

[Robert Bl]

Расул Гитинов:

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

[Расул Гитинов]

Robert Bl: Помогло, но только с точками, а окошки('tooltip'), все равно все вместе открываются при нажатии на точку

[Robert Bl]

Расул Гитинов: У вас окошки вложены в точки? Мне нужен код разметки

[Расул Гитинов]

<div id="murmansk" class="location">
	<div class="mark"></div>
	<div class="tooltip">
		<h4>Мурманск</h4>
		<p>5 адресов</p>
		<a href="#0" target="_blank">Посмотреть адреса</a>
	</div>
</div>

[Robert Bl]

Расул Гитинов: $('.mark.active +.tooltip').fadeIn();

[Расул Гитинов]

Robert Bl: Отлично! Спасибо большое. А можно сделать так, чтобы уже при нажатии на другую точку эта скрывалась, а та активировалась?

[Robert Bl]

Расул Гитинов:

$(function(){
  $('.mark').click(function(e){
    if(!$(e.target).hasClass('active')){
      $(.mark.active).removeClass('active');
      $('.mark.active +.tooltip').fadeOut();
      $(e.target).addClass('active');
      $('.mark.active +.tooltip').fadeIn();
    }
  });
});

[Расул Гитинов]

Robert Bl: Работает, только предыдущая открытая точка не скрывается

[Robert Bl]

Расул Гитинов:
Поменяйте их местами

$(.mark.active).removeClass('active');
$('.mark.active +.tooltip').fadeOut();

[Расул Гитинов]

Robert Bl: Спасибо большое! Все, получилось. Благодарен)

Answer 2

[kulaeff]

Можно использовать e.target или 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();
    }
  });
});

Можно переделать с использованием .toggleClass()