javascript - 在 HTML 中访问 nextElementSibling

Question

我用纯 JS 编写了一个灯箱脚本:

HTML:

<img onclick="pLightbox(this)" src="MyPhoto.jpg" />

JS:

function pLightbox(objPhoto){
   var path=objPhoto.src;
   HTMLtext = '<img src="' + path + '">';
   containerDiv.innerHTML = HTMLtext;
}

(为了清晰起见，代码被缩写)

这很好用。现在我正在尝试访问 DIV 中的下一个同级。我尝试过:

HTMLtext += '<img src="images/Next.png" onclick="pLightbox(' + objPhoto.nextElementSibling + ')">';

这不起作用 - 尝试了几种不同的变体(nextElementSibling.src等)，但没有任何作用。

如何从 HTML 字符串访问下一个同级？

Answer 1

呃，不。不要将 DOM 元素与字符串连接起来。不要使用事件处理程序。特别是，不要使用事件处理程序内容属性。

这才是正确的做法。 HTML 中没有事件。没有令人讨厌的字符串操作。没有 HTML 注入(inject)漏洞。

document.querySelector('img').addEventListener('click', pLightbox);
function pLightbox() {
  containerDiv.innerHTML = "";
  var img = document.createElement('img');
  img.src = this.src;
  img.addEventListener('click', pLightbox.bind(this.nextElementSibling));
  containerDiv.appendChild(img);
}

<img src="//stackoverflow.com/favicon.ico" />
<img src="//scifi.stackexchange.com/favicon.ico" />
<img src="//superuser.com/favicon.ico" />
<img src="//crossvalidated.com/favicon.ico" />
<div id="containerDiv">Click the first image. Then keep clicking the new image</div>