使用 jQuery 自动将 class 添加到 WordPress 数据库中的图像链接

Using jQuery to automatically add class to image links in WordPress database

我不得不切换灯箱脚本,因为我使用的灯箱脚本没有响应,而且网站正在转向响应式布局。很多网站都在 WordPress 中,我要切换到的脚本没有 WordPress 插件。我想我真正需要做的就是使用 jQuery 将 class 插入到图像 link 中,当它们 link 到另一个图像时。其余的我可以在 header.php 文件中处理。我知道 Javascript 的数量可以写在邮票的背面,所以如果有人能告诉我这是否有效(或者是否有更好的方法),我将不胜感激?

如果我添加

<script src="http://code.jquery.com/jquery-latest.min.js.js"></script>

到header加一个link到包含以下代码的.js文件

    jQuery(document).ready(function() {

    jQuery("a[href$='jpg'] img, a[href$='JPG'] img, a[href$='jpeg'] img, a[href$='JPEG'] img, a[href$='png'] img, a[href$='PNG'] img, a[href$='gif'] img, a[href$='GIF'] img").parent().addClass("theClass");

});

它能胜任吗?除了在现场网站上,我没有办法测试这个,所以如果可能的话,我想第一时间把它做好。

你可以使用这个:

(function($){
    $(function(){
        $('a').filter(function(){
            return this.href && this.href.match(/\.(?:jpe?g|gif|bmp|a?png)$/i);
        }).find('img').addClass('the-class');
    });
})(jQuery);

这将搜索每个 link 并过滤掉不指向图像的那些,然后将 class 应用于图像(避免 class 带有大写字母,使用破折号 -).
该匹配不区分大小写,因此它将匹配 a.JpG 以及 a.jpg.
它匹配的文件扩展名是jpgjpegpngapnggifbmp.
括号内可以添加更多,用|.

隔开

如果要申请 link 著名的 class,请删除 .find('img')

现在,为什么我要使用 this.href && this.href.match() 而不是使用选择器 a[href]
这只是出于性能原因:减轻对选择器的解析,因此它可以使用 document.getElementsByTagName('a')。检查 this.href 无论如何都会进行,但是在较早的阶段,但是用于匹配元素的引擎必须更加努力地工作。

我认为您不需要进行所有模式匹配。如果您想将 class 添加到任何 link 的图像,请尝试:

jQuery( document ).ready( function(){
  // Add the class to the image
  jQuery( 'a > img' ).addClass( 'newClass' );
  // or add the class to the link
  jQuery( 'a > img' ).parent().addClass( 'newClass' ); 
} );

这只会影响包裹在 link 标签中的图像,但不会影响任何其他 link、PDF 等

更新

要定位 href 是图像的 links,您可以使用类似这样的东西(根据需要添加或更改扩展名):

jQuery( document ).ready( function(){
  jQuery( 'a[href$=".gif"], a[href$=".jpg"], a[href$=".png"]' ).addClass( 'newClass' );
} );