Question

好的，所以我使用了一些jquery来选择页面上的所有<a>标签，如果它们链接到图像文件，则为了灯箱的目的添加zoom类。这是有效的代码

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

虽然存在问题;

假设我有一个链接只是转到另一个页面，但是传递了一个图像URL作为GET变量在URL中由于此而激活了灯箱并且因为链接实际上不是图像而失败。例如：

<a href="http://example.com/a-normal-page/?pic=http://example.com/pics/picture.jpg">Link text</a>

在上面的例子中，jQuery脚本会将zoom类添加到此锚，即使它实际上并未链接到图片。这通常不会成为一个问题，因为您会在灯箱有机会出现之前离开页面前往链接的目的地，但是在新的标签/窗口打开的时候，我会收到一个失败的灯箱。

这在社交媒体按钮上尤为普遍，例如Pinterest在链接中传递图像网址。

[为标题道歉 - 我不确定如何最好地表达它。请随时编辑更合适的内容]

Answer 1

只有zoom属性不包含href（或者换句话说，不包含查询字符串）时才可以添加?类，例如

$(document).ready(function () {
    $('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').each(function() {
        if (this.href.indexOf('?') < 0) {
             $(this).addClass('zoom');
        }
    });
});

Answer 2

您可以使用简单的正则表达式解析href，以检查图像是否不在查询字符串中，并过滤掉误报。

$(document).ready(function () {
    $imgLinks = $('a[href$=".png"], a[href$=".gif"], a[href$=".jpg"]');
    $imgLinks.filter(function() {
        return !$(this)
                .attr('href')
                .match(/^http\:\/\/.*\?.*http\:\/\/.*\.(png|gif|jpg)$/);
    })
    .addClass('zoom');
});

jQuery在链接传递变量时向图像链接添加类而不会搞乱

2 个答案: