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

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

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

但是这有一个问题;

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

 Link text 

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

这在诸如Pinterest之类的社交媒体按钮上特别普遍，其在链接内传递图像URL。

[道歉的标题 – 我不确定如何最好地说出它。 请随时编辑更合适的东西]

Answer 1

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

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