Y a-t-il un moyen plus court d'écrire ce script? (Ciblant plusieurs éléments pour exécuter la même fonction)

Question

J'ai donc ce joli script curseur que je veux utiliser sur cette page: http://tuscaroratackle.com/rods pour plusieurs instances sur la page. (En d'autres termes, chaque affichage de tige aura son propre curseur, un total d'environ 11 curseurs sur la page)

Pour exécuter le script que je dois inclure cette déclaration de fonction:

$(document).ready(function(){ 
    $("#rod-slider1").easySlider(); 
    $("#rod-slider2").easySlider(); 
    $("#rod-slider3").easySlider(); 
    $("#rod-slider4").easySlider(); 
    $("#rod-slider5").easySlider(); 
    $("#rod-slider6").easySlider(); 
    $("#rod-slider7").easySlider(); 
    $("#rod-slider8").easySlider(); 
    ...etc... 
    }); 

Ainsi, le question ici (est une question jQ noob je sais) est-ce que je peux combiner ces lignes en un en ajoutant tous les sélecteurs d'ID dans la première fonction? Et si oui, quel serait le format approprié pour l'écrire ainsi?

Answer 1

Vous pouvez également utiliser une classe:

$(document).ready(function(){ 
    $(".rod-slider").easySlider(); 
}); 

Le curseur sera maintenant appliqué à tous/tous les éléments ayant la classe rod-slider.

Si vous voulez/besoin d'utiliser ids, vous pouvez le faire en les séparant par une virgule:

$(document).ready(function(){ 
    $("#rod-slider1, #rod-slider2, #rod-slider3, #etc").easySlider(); 
}); 

Ou vous pouvez utiliser la méthode add.

Si vous ne voulez pas vous modifier html en cours, vous pouvez utiliser le sélecteur starts with:

$(document).ready(function(){ 
    $("[id^='rod-slider']").easySlider(); 
}); 

Answer 2

$(".rodslider").easySlider(); 

Where "rodslider" is a class and not an id selector. 

Answer 3

Donnez-leur toute une classe commune, puis utilisez un .class selector, comme ceci:

$(function(){ 
    $(".rod-slider").easySlider(); 
}); 

Answer 4

Vous pouvez ajouter une classe et les sélectionner toutes ensemble. Par exemple, si elles sont DIVs, vous pouvez simplement faire de cette façon

<div class="rodslider"></div> 

et

$(document).ready(function(){ 
    $("div.rodslider").easySlider(); 
}); 

Answer 5

Vous pouvez utiliser le sélecteur starts-with

$(document).ready(function(){ 
    $("[id^='rod-slider']").easySlider(); 
    }); 

Cela se traduit pour sélectionner tous les éléments qui ont un id attribut qui commence par rod-slider

Vous pouvez améliorer les performances si vous savez que le nom de l'étiquette est le même pour tous les éléments. Par exemple, s'ils sont tous divs, vous pouvez l'écrire comme

$("div[id^='rod-slider']").easySlider(); 

pour une meilleure performance ..

Answer 6

Vous pouvez faire:

$(document).ready(function(){ 
    for (var i = 1; i <= 8; i++) { 
     $("#rod-slider" + i).easySlider(); 
    } 
}); 

ou tout simplement utiliser le sélecteur de classe ...

$(document).ready(function(){ 
    $(".rod-slider").easySlider(); 
});