Question

我不得不切换灯箱脚本，因为我使用的那个没有响应，而且网站正在转向响应式布局。很多网站都在WordPress中，我转而使用的脚本没有WordPress插件。我认为我真正需要做的就是在链接到另一个图像时使用jQuery将类插入到图像链接中。其余的我可以在header.php文件中处理。我知道的Javascript数量可以写在邮票的背面，所以如果有人可以告诉我这是否有用（或者是否有更好的方法），我将非常感激。？

如果我添加

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

到标题以及指向包含以下代码的.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");

});

它会完成这项工作吗？除了现场网站之外，我没有办法对此进行测试，所以如果可能的话，我想第一时间做好。

Answer 1

您可以使用：

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

这将搜索每个链接并过滤掉未指向图像的链接，然后将类应用于图像（避免使用大写的类，使用短划线-）。
该匹配不区分大小写，因此匹配a.JpG以及a.jpg 它匹配的文件扩展名为jpg，jpeg，png，apng，gif和bmp。
可以在括号内添加更多内容，以|分隔。

如果您想申请着名班级的链接，请删除.find('img')。

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

Answer 2

我认为你不需要做所有模式匹配。如果要将类添加到任何链接图像，请尝试：

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' ); 
} );

这只会影响包含在链接标记中的图像，但不会影响任何其他链接，PDF等。

<强>更新

要定位href为图像的链接，您可以使用类似的内容（根据需要添加或更改扩展名）：

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

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

2 个答案: