Question

在每个产品页面中，我们都有一堆标签，其中一些包含指向其他网站的链接，一些包含PDF链接。

我想要做的是以某种方式找到每个标签中的PDF链接，并将以下类添加到它们：pdf-icon。这个类有以下CSS：

.pdf-icon::before {
  content: url(image.png) " ";
}

有没有办法用PHP或Javascript做到这一点？

顺便说一句，我所谈论的网站是http://www.ibisci.com，示例产品是http://www.ibisci.com/product/ib56000b-hr-2025-high-resolution-electrophoresis-dna-start-up-kit。向下滚动以查看产品标签，然后单击＆＃34;操作手册＆＃34;。

提前致谢！

Answer 1

<强>更新

OP的页面使用jQuery作为选项卡。但是，选项卡内容中的链接是常规链接。所以下面的方法可行，但jQuery解决方案可能是更好的选择。

<强>原始

这个问题有很多解决方案。以下方法是说明一种方法的基础。它假设href是一个url并循环浏览页面上的链接以查找.pdf扩展名。这些类有一个类，使它们变红。

运行代码段进行测试

<html>
<body>
<style type="text/css">
    .myclass { color: red; }
</style>   

<h2>Find PDF Links</h2>    
<ol>    
    <li><a href="page1.pdf">example1.pdf</a>   
    <li><a href="page1.pdf">example2.pdf</a>    
    <li><a href="page1.html">example3.html</a> 
    <li><a href="page1.pdf">example4.pdf</a> 
</ol>
    
<script type="text/javascript">
    
   var i, links = document.getElementsByTagName('a');
    
    for(i=0; i<links.length; i++) {
        if (links[i].href.match(/.pdf/ig)) links[i].className = 'myclass';
    }
    
</script>
    
</body>
</html>

自动将图像添加到WooCommerce产品标签中的PDF链接

1 个答案: