Javascript 將<a>鏈接更改為 fancybox iframe 彈出窗口僅限於 31 個鏈接</a>

Question

我有一個我無法解決的奇怪問題。

我有一個帶有小縮略圖的投資組合樣式頁面，每個縮略圖超鏈接到同一域上的另一個頁面。

我編寫了 javascript 代碼來更改所有<a><a/>鏈接到 fancybox 鏈接，以便在 iframe 彈出窗口中打開。

原文鏈接： <a class="elementor-post__thumbnail__link" href="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>

問題是我的代碼僅適用於前 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”開頭的行

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

對此

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

您的代碼只執行了 31 次，因為您當前的代碼說要在 31 個字符長的單詞“elementor-postthumbnaillink”的長度內重復它。

感謝 tazmeah 在另一個站點上提供此解決方案。