ColorBox-用于CDN上所有图像的jQuery选择器

Question

我刚刚将我的网站设置为使用CDN，这一切都按照计划进行，并且基本上按预期工作——除了我用于图像的colorbox之外。

我有一种感觉，它不再工作了，因为所有图像的末尾都有一个查询字符串（如image.png?9d7bd4），这破坏了我的jQuery选择器：

/* colorbox - use it on all links to images */
$('a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"]').colorbox({
    'rel': 'images',
    'photo': true,
    'maxWidth': '90%',
    'maxHeight': '90%'
});

有人能帮我重写jQuery代码使其工作吗？非常感谢。

Answer 1

您使用的是带有选择器的结束符。您希望将其更改为"包含"。

/* colorbox - use it on all links to images */
$('a[href*=".jpg"],a[href*=".jpeg"],a[href*=".png"],a[href*=".gif"]').colorbox({
    'rel': 'images',
    'photo': true,
    'maxWidth': '90%',
    'maxHeight': '90%'
});

有关属性选择器的详细信息：https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors

然而，如果可能的话，你可以在图像中添加一个类，使选择它们变得更容易。

Answer 2

或者可以使用Contains选择器替代包含单词

/* colorbox - use it on all links to images */
$('a[href*=".jpg"],a[href*=".jpeg"],a[href*=".png"],a[href*=".gif"]').colorbox({
    'rel': 'images',
    'photo': true,
    'maxWidth': '90%',
    'maxHeight': '90%'
});

它对我有效

Answer 3

您可以使用contains:

/* colorbox - use it on all links to images */
$('a[href*=".jpg"],a[href*=".jpeg"],a[href*=".png"],a[href*=".gif"]').colorbox({
    'rel': 'images',
    'photo': true,
    'maxWidth': '90%',
    'maxHeight': '90%'
});