Иногда разработчику необходимо знать идентификатор кнопки, на которую нажал пользователь, чтобы определить дальнейшие действия на веб-странице. Как вы увидите в этой статье, это можно сделать как с помощью ванильного JavaScript, так и с помощью jQuery. Итак, начнем:
Сначала мы создадим простую HTML-страницу с двумя кнопками в центре страницы:
ДОКТИП HTML >
< HTML >
< тело >
< центр >
< див стиль знак равно 'верхнее поле: 50px;' >
< h2 > Нажмите одну из следующих кнопок h2 >
< кнопка я бы знак равно 'кнопка_один' стиль знак равно 'ширина: 100 пикселей; высота: 40 пикселей; правое поле: 10 пикселей;' > 1 кнопка >
< кнопка я бы знак равно 'кнопка_два' стиль знак равно 'ширина: 100 пикселей; высота: 40 пикселей;' > два кнопка >
див >
центр >
тело >
HTML >
Как получить идентификатор нажатой кнопки с помощью JavaScript?
Мы можем получить идентификатор нажатой кнопки с помощью JavaScript несколькими различными способами. В нашем первом методе мы получим список всех тегов кнопок и сохраним их в переменной. Затем мы пройдемся по нодлисту, чтобы получить идентификатор нажатой кнопки:
< сценарий >
кнопки var = document.getElementsByTagName ( 'кнопка' ) ;
за ( позволять индекс = 0 ; индекс < пуговицы.длина; индекс++ ) {
кнопки [ индекс ] .onclick = функция ( ) {
тревога ( этот .id ) ;
}
}
сценарий >
Мы также можем настроить каждую кнопку с помощью по щелчку событие индивидуально:
ДОКТИП HTML >
< HTML >
< тело >
< центр >
< див стиль знак равно 'верхнее поле: 50px;' >
< h2 > Нажмите одну из следующих кнопок h2 >
< кнопка я бы знак равно 'кнопка_один' стиль знак равно 'ширина: 100 пикселей; высота: 40 пикселей; правое поле: 10 пикселей;' по щелчку знак равно 'alertId(этот.id)' > 1 кнопка >
< кнопка я бы знак равно 'кнопка_два' стиль знак равно 'ширина: 100 пикселей; высота: 40 пикселей;' по щелчку знак равно 'alertId(этот.id)' > два кнопка >
див >
центр >
тело >
< сценарий >
функция alertId ( я бы ) {
тревога ( я бы )
}
сценарий >
HTML >
Как получить идентификатор нажатой кнопки с помощью jQuery?
jQuery также имеет несколько различных методов, которые можно использовать для получения идентификатора нажатой кнопки. Мы начнем с щелчок() метод, который применяется к селектору и принимает имя функции в качестве необязательного аргумента:
ДОКТИП HTML >
< HTML >
< тело >
< центр >
< див стиль знак равно 'верхнее поле: 50px;' >
< h2 > Нажмите одну из следующих кнопок h2 >
< кнопка я бы знак равно 'кнопка_один' стиль знак равно 'ширина: 100 пикселей; высота: 40 пикселей; правое поле: 10 пикселей;' по щелчку знак равно 'alertId(этот.id)' > 1 кнопка >
< кнопка я бы знак равно 'кнопка_два' стиль знак равно 'ширина: 100 пикселей; высота: 40 пикселей;' по щелчку знак равно 'alertId(этот.id)' > два кнопка >
див >
центр >
тело >
< сценарий >
$ ( 'кнопка' ) .клик ( alertId ( $ ( это ) .attr ( 'я бы' ) ) ) ;
функция alertId ( я бы ) {
тревога ( я бы )
}
сценарий >
HTML >
Мы также можем использовать на() метод для прикрепления обработчиков событий к элементам. на() метод принимает как минимум одно событие в качестве аргумента вместе с некоторыми другими необязательными аргументами:
< HTML >
< тело >
< центр >
< див стиль знак равно 'верхнее поле: 50px;' >
< h2 > Нажмите одну из следующих кнопок h2 >
< кнопка я бы знак равно 'кнопка_один' стиль знак равно 'ширина: 100 пикселей; высота: 40 пикселей; правое поле: 10 пикселей;' по щелчку знак равно 'alertId(этот.id)' > 1 кнопка >
< кнопка я бы знак равно 'кнопка_два' стиль знак равно 'ширина: 100 пикселей; высота: 40 пикселей;' по щелчку знак равно 'alertId(этот.id)' > два кнопка >
див >
центр >
тело >
< сценарий >
$ ( 'кнопка' ) .на ( 'щелкнуть' , идентификатор предупреждения ( $ ( это ) .attr ( 'я бы' ) ) ) ;
функция alertId ( я бы ) {
тревога ( я бы )
}
сценарий >
HTML >
Вывод
Доступ к идентификатору нажатой кнопки можно получить как через обычный JavaScript, так и через jQuery. Мы обсудили четыре таких метода и дали подробные сведения и соответствующие примеры в этой статье.