Javascript 更改 <a> 到 fancybox iframe 弹出窗口的链接仅限于 31 个链接

Question

我有一个我无法解决的奇怪问题。

我有一个带有小缩略图的投资组合样式页面，每个缩略图都超link到同一域中的另一个页面。

我已经编写了 javascript 代码来将所有 <a><a/> link 更改为 fancybox link 以便在 iframe 弹出窗口中打开。

原文link：<a class="elementor-post__thumbnail__link" href="https:...">...</a>

应用js后link：<a class="elementor-post__thumbnail__link" href="javascript:;" data-fancybox="" data-type="iframe" data-src="https://...">...</a>

问题是我的代码只适用于前 31 个缩略图 links

我已经把代码放在页面底部的内容后面了。

你对我的问题有什么想法吗？

这是页面：Example

这是内容之后的代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>
var i;
for (i = 0; i < "elementor-post__thumbnail__link".length; i++) {
    document.getElementsByClassName("elementor-post__thumbnail__link")[i].setAttribute("data-fancybox", "");
    document.getElementsByClassName("elementor-post__thumbnail__link")[i].setAttribute("data-type", "iframe");
    var datasrc = document.getElementsByClassName("elementor-post__thumbnail__link")[i].getAttribute("href");
    document.getElementsByClassName('elementor-post__thumbnail__link')[i].setAttribute("data-src", datasrc);
    document.getElementsByClassName("elementor-post__thumbnail__link")[i].setAttribute("href", "javascript:;");
}
</script>

任何帮助都是有用的。提前致谢，尼古拉斯。

Answer 1

一如既往，我自己找到答案，或者他们从其他地方帮助我。

无论如何，这是解决方案：

Change the line which begins with "for" from this

for (i = 0; i < "elementor-postthumbnaillink".length; i++) {

to this

for (i = 0; i < document.querySelectorAll("a.elementor-post__thumbnail__link").length; i++) {

Your code is only doing it 31 times because your current code says to repeat it for the length of the word "elementor-postthumbnaillink" which is 31 characters long.

感谢 tazmeah 在另一个站点上提供此解决方案。

Javascript 更改 <a> 到 fancybox iframe 弹出窗口的链接仅限于 31 个链接

Javascript change <a> links to fancybox iframe popup is limited to 31 links only

javascript

iframe

popup

limit

fancybox