Как я могу упростить этот jquery?

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 ИЛИ class2 против:

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

, который применяет все, что вы делаете, к якорям, которые имеют class1 и class2.

Answer 2

Вы можете использовать селектор attributeStartsWith , который соответствует элементам с указанным атрибутом и начинается с определенного значения.

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

Answer 3

Не забудьте структурировать его, по крайней мере, так:

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

Answer 4

Не могли бы вы использовать

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

, который применяется к любому тегу с атрибутом rel, начинающимся с imagebox?

Answer 5

Попробуйте это:

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

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

Затем, когда вам нужно добавить новый селектор, просто добавьте его в массив селекторов.