[英]Javascript change <a> links to fancybox iframe popup is limited to 31 links only
I have strange problem that I can't solve.我有一个我无法解决的奇怪问题。
I have a portfolio style page with small thumbnails and each thumbnail hyperlinks to another page on the same domain.我有一个带有小缩略图的投资组合样式页面,每个缩略图超链接到同一域上的另一个页面。
I have write javascript code to change all the <a><a/>
links to fancybox links in order to opened in iframe popup.我编写了 javascript 代码来更改所有
<a><a/>
链接到 fancybox 链接,以便在 iframe 弹出窗口中打开。
The original link: <a class="elementor-post__thumbnail__link" href="https:...">...</a>
原文链接:
<a class="elementor-post__thumbnail__link" href="https:...">...</a>
The link after apply js: <a class="elementor-post__thumbnail__link" href="javascript:;" data-fancybox="" data-type="iframe" data-src="https://...">...</a>
apply js 后的链接:
<a class="elementor-post__thumbnail__link" href="javascript:;" data-fancybox="" data-type="iframe" data-src="https://...">...</a>
<a class="elementor-post__thumbnail__link" href="javascript:;" data-fancybox="" data-type="iframe" data-src="https://...">...</a>
The problem is that my code, only works for the first 31 thumbnail links问题是我的代码仅适用于前 31 个缩略图链接
I have place the code on the bottom of the page after the content.我已将代码放在内容之后的页面底部。
Do you have any ideas for my problem?你对我的问题有什么想法吗?
This is the page: Example这是页面: 示例
And this is the code after the content:这是内容之后的代码:
<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>
Any help is useful.任何帮助都是有用的。 Thanks in advance, Nicolas.
在此先感谢尼古拉斯。
As always I find the answer myself or they help me from elsewhere.与往常一样,我自己找到答案,或者他们从其他地方帮助我。
Anyways, here is the solution:无论如何,这是解决方案:
Change the line which begins with "for" from this
从此更改以“for”开头的行
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.
您的代码只执行了 31 次,因为您当前的代码说要在 31 个字符长的单词“elementor-postthumbnaillink”的长度内重复它。
Thanks to tazmeah for this solution on another site.感谢 tazmeah 在另一个站点上提供此解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.