Existe uma maneira mais curta de escrever este script? (Direcionando vários elementos para executar a mesma função)

Question

Então, eu tenho esse bom script deslizante que quero usar nesta página: http://tuscaroratackle.com/rods Para várias instâncias na página. (Em outras palavras

Para executar o script, tenho que incluir esta declaração de função:

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

Então, a pergunta aqui (é uma pergunta do JQ Noob que conheço) é que posso combinar essas linhas em uma adicionando todos os seletores de identificação à primeira função? E se sim, qual seria o formato adequado para escrevê -lo dessa maneira?

Answer 1

Você também pode usar uma aula:

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

O controle deslizante agora será aplicado a todos os elementos que têm a classe rod-slider.

Se você quiser/precisar usar IDs, pode fazê -lo separando -os com uma vírgula:

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

Ou você pode usar o add método.

Se você não deseja modificar seu html atual, você pode usar o starts with Seletor:

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

Answer 2

Você pode usar o starts-with Seletor

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

Isso se traduz em selecionar todos os elementos que têm um Eu iria atributo que começa com Slider de haste

Você pode melhorar o desempenho disso se souber que o nome da tag é o mesmo para todos os elementos. Por exemplo, se forem todos divs, você poderia escrever como

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

Para melhor desempenho ..

Answer 3

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

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

Answer 4

Dê a todos uma classe comum e depois use um .class Seletor, assim:

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

Answer 5

Você pode adicionar uma aula e selecionar todos juntos. Por exemplo, se forem divs, você pode fazer dessa maneira

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

e

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

Answer 6

Você poderia fazer:

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

Ou apenas use o seletor de classe ...

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