Несколько всплывающих при нажатии

Question

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

Вот ссылка на кодовое поле https://codepen.io/anon/pen/YoZGyQ

var DRAG_THRESOLD = 10;

var containerEl = document.querySelector( '#js-circles' );
var popin = document.querySelector( '#js-popin-0' );
var popinIngredients = document.querySelector( '#js-popin-ingred-0' );
//var addButtonEl = document.querySelector( '#add-circle' );
//var deleteButtonEl = document.querySelector( '#delete-circle' );
var changeCatRed = document.querySelector( '#js-change-category-red' );
var changeCatBlue = document.querySelector( '#js-change-category-blue' );
var changeCatYellow = document.querySelector( '#js-change-category-yellow' );

Заранее спасибо.

Answer 1

Вот один из способов, которым вы можете это сделать.

Добавление дополнительных полей к функции createCircle(). Например, вы можете добавить строку, содержащую содержимое, которое вы хотите иметь в соответствующем диалоговом окне.

var circles = [
  createCircle(0, 0, 'small', 'red', 'Circle 1 ?', 'js-popin-1', 'Popup text one'),
]

Затем в функции createCircle() добавьте это новое поле в качестве дополнительных атрибутов data- на круг.

function createCircle (x, y, radius, color, text, popin, popintext) {
  ...
  circleEl.setAttribute('data-title', text)
  circleEl.setAttribute('data-content', popintext)
  ...
}

Затем в обработчике щелчков для кругов получите эти значения данных и используйте их для обновления всплывающего окна перед его открытием.

var elements = document.querySelectorAll('.circle');
Array.prototype.forEach.call(elements, function(el, i){
  el.addEventListener('click', function() {
    ...
    popin.querySelector('.popin-title').textContent = el.getAttribute('data-title');
    popin.querySelector('.popin-content').textContent = el.getAttribute('data-content');
    ...
  });
});

Для этой последней части нам нужно обновить HTML для всплывающего окна. Мы добавляем некоторые имена классов, чтобы найти нужные элементы HTML для обновления.

<h3 class="popin-title">Blue circle 1</h3>
...
<p class="popin-content">Lorem ipsum dolor sit amet, consectetur adipiscing...</p>

https://codepen.io/PaulLeBeau/pen/BgWWVv (нажмите на зеленые кружки)