Question

我正在尝试使用圈子互动来展示内容。我在下面的代码中尝试过此代码，在其中单击任何圆圈时，它都会打开相同的弹出窗口。我该如何使每个圈子都有一个单独的弹出窗口？

这是codepen链接 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（单击绿色圆圈）

点击多个弹出

1 个答案: