普通的 JavaScript 模式不起作用。 我需要另一双眼睛

Question

我正在用普通的 JavaScript 创建这个。

我试图通过循环一个集合来加载模态，我只得到最后一个模态。

当我这样做时，一切都很好。

buttons[0].onclick = function() {modals[0].style.display = "block";return false;}
buttons[1].onclick = function() {modals[1].style.display = "block";return false;}
buttons[2].onclick = function() {modals[2].style.display = "block";return false;}

当我这样做时，无论我点击哪个按钮，我都只会得到最后一个模式

var i = 0;
while (i < buttons.length) {
  buttons[i].onclick = function() {modals[i].style.display = "block";return false;} 
  i++;
} 

有什么建议么？

Answer 1

事件委托可能是此类问题的解决方案：

 document.addEventListener(`click`, handle); function handle(evt) { if (evt.target.dataset.modal) { document.querySelectorAll(`[data-modaldiv]`) .forEach(m => m.classList.remove(`active`)); const divId = evt.target.dataset.modal document.querySelector(`[data-modaldiv='${divId}']`) .classList.add(`active`); } }

 [data-modaldiv] { display: none; } [data-modaldiv].active { display: block; }

 <button data-modal="1">button 1</button> <button data-modal="2">button 2</button> <button data-modal="3">button 3</button> <p data-modaldiv="1">Modal 1</p> <p data-modaldiv="2">Modal 2</p> <p data-modaldiv="3">Modal 3</p>

Answer 2

这似乎是臭名昭著的外观问题。 这就是我想出的。

for (var i = 0, link; i < buttons.length; i++) {
    buttons[i].onclick = function(num) {
        return function() {
            modals[num].style.display = "block";
            return false;
        };
    }(i);
}