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

Question

Допустим, у меня есть список из 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 () или что-то подобное, подходящее для этой ситуации?

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

Answer 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');
    });

Answer 2

попробуйте

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

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

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