Как я могу упростить этот 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")... 

который применяет все, что вы» re для анкеров, которые имеют класс 1 и класс2.

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

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

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

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

Answer 5

Помните, что это структурировано как минимум.

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