Question

我有以下要简化的jquery。

我只是重复同样的事情。

请有人给我建议。

提前致谢。

$("a[rel='imagebox-all']").colorbox({slideshow:true});
$("a[rel='imagebox-new']").colorbox({slideshow:true});
$("a[rel='imagebox-even']").colorbox({slideshow:true});
$("a[rel='imagebox-amina']").colorbox({slideshow:true});
$("a[rel='imagebox-cumulus']").colorbox({slideshow:true});
$("a[rel='imagebox-wee']").colorbox({slideshow:true});
$("a[rel='imagebox-four']").colorbox({slideshow:true});
$("a[rel='imagebox-teen']").colorbox({slideshow:true});

Answer 1

假设您要排除imagebox-*的其他值：

$("a[rel^='imagebox-']").colorbox({slideshow:true});

话虽这么说，通常最好避免使用属性选择器，并且通常最好不要重构问题以提供更好的解决方案。就像你可以使用类：

<a href="..." class="imagebox teen"> ...

注意空格：分配了两个类。所以你可以这样做：

$("a.imagebox")...

所有人。或者：

$("a.imagebox.teen")...

仅适用于其中一个。

请记住，您也可以使用逗号添加多个选择器：

$("a.class1, a.class2")...

将把您正在做的事情应用于class1 OR class2与

的锚点

$("a.class1.class2")...

将你正在做的任何事情应用于具有class1 AND class2的锚点。

Answer 2

您可以使用attributeStartsWith选择器匹配具有指定属性的元素，并以特定值开头。

$("a[rel^='imagebox-']").colorbox({slideshow:true});

Answer 3

你能用

吗？

$("a[rel^='imagebox']").colorbox({slideshow:true});

适用于任何具有以imagebox开头的rel属性的标记？

Answer 4

试试这个：

var selectors = [
    "a[rel='imagebox-all']",
    "a[rel='imagebox-new']",
    "a[rel='imagebox-even']",
    // ...
];

$.each(selectors, function(){
    $(this).colorbox({slideshow:true});
});

然后，无论何时需要添加新选择器，只需将其添加到选择器数组中。

我该如何简化这个jquery？

4 个答案: