Как использовать Jquery для назначения обработчика событий всем тегам определенного класса

#jquery #event-handling #pagination #onclick

#jquery #обработка событий #разбивка на страницы #onclick

Вопрос:

Допустим, у меня есть список из 15 тегов привязки (для разбивки на страницы галереи изображений) внизу моей страницы, который выглядит следующим образом

 <a href"#" class="paginate" name="1">1</a>
<a href"#" class="paginate" name="2">2</a>
<a href"#" class="paginate" name="...">...</a>
<a href"#" class="paginate" name="15">15</a>
  

Во время инициализации страницы я хочу получить все эти теги привязки с именем класса "paginate" и назначить ту же функцию обработчика событий onclick.

Эта функция примет name атрибут нажатой ссылки в качестве параметра, чтобы я мог написать некоторую логику для определения, какие изображения загружать в галерею, на основе того, какая ссылка была нажата.

Как я могу это сделать в Jquery? Может кто-нибудь привести пример использования функции .bind() или чего-то подобного, подходящего для данной ситуации?

Спасибо за ваше время!

Ответ №1:

Это очень просто:

 $('a.paginate') // select all a elements with the paginate class
    .click(function() { // and attach a click handler function to each
        this.name; // the element that was clicked can be accessed with the this keyword
                   // and its name property can be found with this.name
    });
  

Обратите внимание, однако, что name атрибут — не лучшее место для хранения этих данных, потому что семантически это не имя. На вашем месте я бы использовал пользовательский data-page атрибут вместо этого. Это означает, что вы можете использовать data функциональность jQuery:

 <a href"#" class="paginate" data-page="1">1</a>
  

Что позволило бы jQuery:

 $('a.paginate') 
    .click(function() { 
        var page = $(this).data('page');
    });
  

Комментарии:

1. Ах, именно то, что я искал! Я рассмотрю пользовательский атрибут страницы данных, которого никогда раньше не видел. Спасибо! Очень быстрый и четкий ответ!!

Ответ №2:

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

 $('.paginate').click(function() {
     var name = $(this).attr('name');

    // --- code here ----
});
  

надеюсь, это поможет..