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

或替代包含Word ，您可以使用包含选择器

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

这对我有用

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

3 个答案: