Minsan kailangang malaman ng developer ang ID ng button na na-click ng user para magpasya ng karagdagang hakbang sa isang webpage. Tulad ng makikita mo sa write-up na ito, magagawa ito sa pamamagitan ng parehong vanilla JavaScript at jQuery. Kaya, magsimula tayo:
Una, gagawa kami ng isang simpleng HTML webpage na mayroong dalawang button sa gitna ng page:
DOCTYPE html >
< html >
< katawan >
< gitna >
< div istilo = 'margin-top: 50px;' >
< h2 > I-click ang isa sa mga sumusunod na button h2 >
< pindutan id = 'button_one' istilo = 'width: 100px; height:40px; margin-right: 10px;' > 1 pindutan >
< pindutan id = 'button_two' istilo = 'lapad: 100px; taas:40px;' > dalawa pindutan >
div >
gitna >
katawan >
html >
Paano Kunin ang ID ng Na-click na Button Gamit ang JavaScript?
Makukuha namin ang ID ng na-click na button gamit ang JavaScript sa iba't ibang paraan. Sa aming unang paraan, kukunin namin ang nodelist ng lahat ng mga tag ng button at iimbak ang mga ito sa loob ng isang variable. Pagkatapos ay uulitin namin ang nodelist upang makuha ang ID ng button na na-click:
< iskrip >
var buttons = document.getElementsByTagName ( 'button' ) ;
para sa ( hayaan index = 0 ; index < mga pindutan.haba; index++ ) {
mga pindutan [ index ] .onclick = function ( ) {
alerto ( ito.id ) ;
}
}
iskrip >
Maaari rin naming i-set-up ang bawat button gamit ang onclick indibidwal na kaganapan:
DOCTYPE html >
< html >
< katawan >
< gitna >
< div istilo = 'margin-top: 50px;' >
< h2 > I-click ang isa sa mga sumusunod na button h2 >
< pindutan id = 'button_one' istilo = 'width: 100px; height:40px; margin-right: 10px;' onclick = 'alertId(this.id)' > 1 pindutan >
< pindutan id = 'button_two' istilo = 'lapad: 100px; taas:40px;' onclick = 'alertId(this.id)' > dalawa pindutan >
div >
gitna >
katawan >
< iskrip >
function alertId ( id ) {
alerto ( id )
}
iskrip >
html >
Paano Kunin ang ID ng Na-click na Button Gamit ang jQuery?
Ang jQuery ay mayroon ding ilang iba't ibang mga pamamaraan na maaaring magamit upang makuha ang ID ng isang na-click na pindutan. Magsisimula tayo sa click() paraan na inilapat sa isang tagapili at kumukuha ng pangalan ng function bilang isang opsyonal na argumento:
DOCTYPE html >
< html >
< katawan >
< gitna >
< div istilo = 'margin-top: 50px;' >
< h2 > I-click ang isa sa mga sumusunod na button h2 >
< pindutan id = 'button_one' istilo = 'width: 100px; height:40px; margin-right: 10px;' onclick = 'alertId(this.id)' > 1 pindutan >
< pindutan id = 'button_two' istilo = 'lapad: 100px; taas:40px;' onclick = 'alertId(this.id)' > dalawa pindutan >
div >
gitna >
katawan >
< iskrip >
$ ( 'button' ) .click ( alertId ( $ ( ito ) .attr ( 'id' ) ) ) ;
function alertId ( id ) {
alerto ( id )
}
iskrip >
html >
Magagamit din natin ang sa() paraan upang ilakip ang mga tagapangasiwa ng kaganapan sa mga elemento. Ang sa() Ang pamamaraan ay tumatagal ng hindi bababa sa isang kaganapan bilang isang argumento kasama ang ilang iba pang mga opsyonal na argumento:
< html >
< katawan >
< gitna >
< div istilo = 'margin-top: 50px;' >
< h2 > I-click ang isa sa mga sumusunod na button h2 >
< pindutan id = 'button_one' istilo = 'width: 100px; height:40px; margin-right: 10px;' onclick = 'alertId(this.id)' > 1 pindutan >
< pindutan id = 'button_two' istilo = 'lapad: 100px; taas:40px;' onclick = 'alertId(this.id)' > dalawa pindutan >
div >
gitna >
katawan >
< iskrip >
$ ( 'button' ) .on ( 'click' , alertId ( $ ( ito ) .attr ( 'id' ) ) ) ;
function alertId ( id ) {
alerto ( id )
}
iskrip >
html >
Konklusyon
Maaaring ma-access ang ID ng isang na-click na button sa pamamagitan ng parehong simpleng JavaScript at jQuery. Tinalakay namin ang apat na ganoong pamamaraan at nagbigay ng malalim na detalye at mga nauugnay na halimbawa sa pagsulat na ito.