javascript - 多次点击弹出

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 (点击绿色圆圈)