我有一个工作脚本，可以在一个新窗口中打开特定div(称为"note-viewer")中的所有图像。我不能编辑div，简单地在图像周围放置常规锚或添加onclick功能，并且div中的图像太小而无法正常查看。
问题是，它的工作完美的第一次你点击一个图像。如果你在那之后点击另一个图像，你必须点击两次才能使它工作。一旦你尝试第三个图像，什么也没有发生。它不会抛出任何错误。你点击它，它就在那里。
我需要它是一个点击在任何和每一个图像打开它在一个新的窗口。
代码如下:
$("#note-viewer img").click(function () {
var imageLink = $(this).attr("src");
$("#note-viewer img").each(function () {
var myWindow = window.open("", "Image", "_blank", "toolbar=no,scrollbars=no,resizable=yes");
myWindow.document.write("<head><title>Image</title></head>");
myWindow.document.write("<img src=" + imageLink + ">");
return myWindow;
});
});
我知道;我用的是文档。不该写的时候写。"坏，戴夫，坏!"但这只在我们部门内部使用。
<标题>更新我只是试着简化它，尝试使用jQuery来包装图像标签与锚标签，如下所示:
$(function () {
$('#note-viewer img').wrap(function () {
return '<a href="' + $(this).attr('src') + '"></a>';
});
});
那根本不起作用。
这是我想到的最好的工作解决方案，这是对@Jazmit发布的内容进行修改，并添加了一点jQuery:
https://stackoverflow.com/a/62285566/11420625
const noteViewer = document.getElementById('note-viewer');
noteViewer.addEventListener('click', openLink, false);
noteViewer.addEventListener('trix-change', linkImg, false);
function findLink(el) {
if (el.tagName == 'A' && el.href) {
return el.href;
} else if (el.parentElement) {
return findLink(el.parentElement);
} else {
return null;
}
}
function openLink(e) {
const link = findLink(e.target);
if (link == null) { return; }
e.preventDefault();
var base64Check = link.slice(0, 4);
if (base64Check == 'data') {
window.open().document.body.innerHTML = '<img src="' + link + '">';
return;
}
window.open(link, '_blank');
}
function linkImg(e) {
$("#note-viewer figure").each(function () {
var images = this.getElementsByTagName('img');
for (var i = 0, image = images[i]; i < images.length; i++) {
var imageLink = $(image).attr("src");
$(this).wrap('<a href="' + imageLink + '">');
}
});
}
单击第一个图像后，由于某种原因，其余的仍然需要单击两次，但它们都可以工作。此外，它还消除了document.write.
快速添加:事实证明，它需要两次点击，因为Trix编辑器将我(用户)聚焦在图像上，以便在第一次点击时添加标题。我不知道为什么它在你点击的第一张图片上没有这样的表现。