Question

我在普通的JS中编写了一个lightbox脚本：

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注入漏洞。

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

以HTML格式访问nextElementSibling

1 个答案: