Есть ли более короткий способ написать этот скрипт?(Ориентация на несколько элементов для запуска одной и той же функции)

Question

Итак, у меня есть этот хороший скрипт-слайдер, который я хочу использовать на этой странице: http://tuscaroratackle.com/rods для нескольких экземпляров на странице. (Другими словами, каждая публикация стержня будет иметь свой собственный ползунок, всего около 11 ползунков на странице)

Чтобы запустить скрипт, я должен включить это объявление функции:

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

Итак, вопрос здесь (вопрос jQ noob, который я знаю): можно ли объединить эти строки в одну, добавив все селекторы идентификаторов в первую функцию? И если да, то каков будет правильный формат для такой записи?

Answer 1

Вы также можете использовать класс:

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

Ползунок теперь будет применяться ко всем / любым элементам, имеющим класс rod-slider.

Если вы хотите / должны использовать идентификаторы, вы можете сделать это, разделив их запятой:

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

Или вы можете использовать метод add.

Если вы не хотите изменять текущий html, вы можете использовать селектор starts with:

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

Answer 2

Вы можете использовать селектор starts-with

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

Это позволяет выбрать все элементы с атрибутом id , который начинается с rod-slider

Вы можете улучшить производительность, если знаете, что имя тега одинаково для всех элементов.Например, если они все div, вы можете написать это как

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

для лучшей производительности ..

Answer 3

Вы можете сделать:

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

или просто используйте селектор класса ...

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

Answer 4

Вы можете добавить класс и выбрать их все вместе.Например, если они DIV, вы можете просто сделать это

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

и

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

Answer 5

Дайте им всем общий класс, затем используйте .class селектор , например:

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

Answer 6

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

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