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