使用属性值为我的 wordpress 库中的每个图像添加自定义链接

Posted 2023-05-09

【中文标题】使用属性值为我的 wordpress 库中的每个图像添加自定义链接

【英文标题】：Using an attribute value to add custom links for each images in my wordpres gallery

【发布时间】：2021-12-28 00:19:41

【问题描述】：

我在我的摄影网站上使用 Elementor Pro，我想为图库中的每张图片设置自定义链接。默认情况下，我只能为每个图像设置一个相同的全局链接，所以这不是很好。

事实上，我想设置一个自定义链接，将用户重定向到特定图像的商店页面。

我在网上找到了一些代码（感谢 elementhow！），它真的很接近我想要的，但我仍然需要更改一些东西。问题是必须手动将所有链接写入数组中，这很不方便（接近 100 个文件并且还在增长，如果我更改顺序，我必须重新排序链接等）。

这是我目前使用的代码：

<style>.e-gallery-itemcursor: pointer; </style>

<script>
document.addEventListener('DOMContentLoaded', function () 

var filteredImages = document.querySelectorAll('.e-gallery-item');

//Edit the links HERE
var links = [
'https://www.mywebsiteurl.com/product/product-name1/',
'https://www.mywebsiteurl.com/product/product-name2/',
'https://www.mywebsiteurl.com/product/product-name3/',
'https://www.mywebsiteurl.com/product/product-name4/',
];

var _loope = function _loope(i) 
filteredImages[i].addEventListener('click', function () 
location = links[i];
);
;

for (var i = 0; i < filteredImages.length; i++) 
_loope(i);


);

</script>

我想在算法中使用一个属性值来自动为每个图像生成链接。我有这个过程，但我不知道如何编码......

这是一张图片的代码，我可以在“alt”中设置我想要的值。

<div class="e-gallery-image elementor-gallery-item__image e-gallery-image-loaded" data-thumbnail="......" data-width="1024" data-height="768" alt="product-name";"></div>

我想使用“alt”属性为每个文件创建一个唯一的 url，格式如下：

'https://www......com/product/product-name/'

“product-name”将采用每张图片的“alt”属性的值。

我尝试更改这部分代码（通过尝试使用 filtersImages[i].getAttributes 获取属性值来替换“links[i]”）但没有成功...

    var _loope = function _loope(i) 
filteredImages[i].addEventListener('click', function () 
location = links[i];
);
;

有人可以给我一些关于如何做到这一点的提示吗？我花了 2 年时间没有​​编码，所以我有点生疏了......

【参考方案1】：

我认为这可以满足您的需求，正如您已经完成的那样，您可以使用 class 循环浏览每个图像链接。

您可以使用.attr()函数获取alt的值，然后替换链接的href值。

---

演示

// Cycle through each image using common class
$(".e-gallery-image").each( function() 

  // Get value of 'alt' for clicked item
  alt = $(this).attr("alt");

  // Update href value
  $(this).attr("href", "https://www.mywebsiteurl.com/product/" + alt );
  
);


// Prove that its worked
$(".e-gallery-image").click( function() 

  // Confirm all is correct
  console.log($(this).attr("href"));
  
  // Assign url to window
  location.href = $(this).attr("href");

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="e-gallery-image" href="test.com" >Product 1</div>
<div class="e-gallery-image" href="test.com"  >Product 2</div>
<div class="e-gallery-image" href="test.com"  >Product 3</div>
<div class="e-gallery-image" href="test.com"  >Product 4</div>
<div class="e-gallery-image" href="test.com"  >Product 5</div>

【讨论】：

感谢您的快速回答！但我认为这在我的情况下不起作用，因为我的画廊元素中没有“href”属性。我想我需要在querySelectorAll('.e-gallery-item') 挂钩的每个选择器上使用addEventListener('click') 来添加自定义链接...

已更新，如果您尝试一下应该可以使用

嘿！感谢更新 ！为每张图片添加了href，但是当我单击它们时没有任何反应... :(

【参考方案2】：

其实很简单。我试图定位一个父元素并且它有效！如果有人感兴趣，这是我使用的代码：

document.addEventListener('DOMContentLoaded', function () 
    var filteredImages = document.querySelectorAll('YOUR_SELECTOR');
    var _loope = function _loope(i) 
        filteredImages[i].addEventListener('click', function() 
            location = "YOUR_WEBSITE_URL" + filteredImages[i].querySelector("YOUR_SELECTOR").getAttribute("alt");
        );
    ;

    for (var i = 0; i < filteredImages.length; i++) 
        _loope(i);
    
);