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

Question

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

我有一个公文包风格的页面，里面有小缩略图，每个缩略图都指向同一域上的另一个页面的超链接。

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

原始链接：<a class="elementor-post__thumbnail__link" href="https:...">...</a>

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

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

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

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

这是页面：示例

这是内容后的代码：

<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

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

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

更改以"；对于"；从这个

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

到这个

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

您的代码只执行了31次，因为您当前的代码说重复一个单词的长度"elementor posthumbnaillink"；长度为31个字符。

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