Как обрабатывать событие клика на нескольких элементах?

Question

[Артем Молотов]

Есть SVG полигоны и при нажатии на верхний первый, все работает, открывается всплывающее окно. Как изменить код, чтобы всплывающие окошки открывались при нажатии на другие полигоны. У каждого полигона окошки с разным содержимым.

Comments

[twobomb]

Ну повесить также обработчики на всё

$('#_002').click( function(event){
		event.preventDefault();
		$('#myOverlay').fadeIn(100, function(){
		$('#myModal') 
		.css('display', 'block')
		.animate({opacity: 1}, 198);
		});
	});

_003-_006...

[Артем Молотов]

twobomb, Я уже так делал, но код переставал работать правильно после этого.
То есть переставало открываться даже первое всплывающее окно.

[twobomb]

Артем Молотов, Да всё там должно рабоать, ну попробуй тогда так

$('.map').click( function(event){
		event.preventDefault();
		switch(event.target.id){
    	case "_001": //some code
      break;
      case "_002": //some code
      break;
      case "_003": //some code
      break;
    }
	});

Answer 1

[Timur Kostenko]

Попробуй следующим образом. Определи объект с контентом для каждого полигона по id

const modalContent = {
  _001: { title: 'Some title', description: 'Some description' },
  _002: { title: 'Some title', description: 'Some description' },
  _003: { title: 'Some title', description: 'Some description' },
  _004: { title: 'Some title', description: 'Some description' },
  _005: { title: 'Some title', description: 'Some description' },
};

Затем при клике на определенный полигон, делай append соответствующего контента по id в myModal.
Пример:

$(polygon).on('click', function(e) {
  const currentId = $(e.currentTarget).attr('id);
  const {title, description} = modalContent[currentId];
  $('#myModal').append(`
    <h1>${title}</h1>
    <p>${description}</p>
  `);
});