javascript - jQuery 将类添加到图像链接而不会在链接传递变量时弄乱

Question

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

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

不过这有一个问题；

假设我有一个链接只是转到另一个页面，但将图像 url 作为 URL 中的 GET 变量传递，灯箱因此被激活并失败，因为链接实际上不是图像。例如:

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

在上面的例子中，jQuery 脚本将缩放类添加到这个 anchor ，即使它实际上没有链接到图片。这通常不会成为问题，因为您会在灯箱有机会出现之前离开页面转到链接的目的地，但在打开新选项卡/窗口时，我会出现失败的灯箱。

这在 Pinterest 等社交媒体按钮上尤为普遍，它在链接中传递图像 url。

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

Answer 1

只有当 href 属性不包含 ?(或者，换句话说，查询字符串是不包括)，例如

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