Понекад програмер мора да зна ИД дугмета на које је корисник кликнуо да би одлучио да ли даље поступа на веб страници. Као што ћете видети у овом тексту, ово се може урадити и преко ванилла ЈаваСцрипт-а и јКуери-ја. Дакле, да почнемо:
Прво ћемо направити једноставну ХТМЛ веб страницу која има два дугмета у центру странице:
ДОЦТИПЕ хтмл >
< хтмл >
< тело >
< центар >
< див стил = 'маргин-топ: 50пк;' >
< х2 > Кликните на једно од следећих дугмади х2 >
< дугме ид = 'буттон_оне' стил = 'видтх: 100пк; хеигхт:40пк; маргин-ригхт: 10пк;' > 1 дугме >
< дугме ид = 'дугме_два' стил = 'ширина: 100 пиксела; висина: 40 пиксела;' > два дугме >
див >
центар >
тело >
хтмл >
Како добити ИД дугмета на које сте кликнули користећи ЈаваСцрипт?
ИД дугмета на које смо кликнули можемо добити помоћу ЈаваСцрипт-а на неколико различитих метода. У нашој првој методи, добићемо листу чворова свих ознака дугмади и ускладиштићемо их унутар променљиве. Затим ћемо прећи преко листе чворова да бисмо добили ИД дугмета на које је кликнуто:
< скрипта >
вар дугмад = доцумент.гетЕлементсБиТагНаме ( 'дугме' ) ;
за ( дозволити индекс = 0 ; индекс < буттонс.ленгтх; индек++ ) {
дугмад [ индекс ] .онцлицк = функција ( ) {
узбуна ( ово.ид ) ;
}
}
скрипта >
Такође можемо подесити свако дугме са онцлицк догађај појединачно:
ДОЦТИПЕ хтмл >
< хтмл >
< тело >
< центар >
< див стил = 'маргин-топ: 50пк;' >
< х2 > Кликните на једно од следећих дугмади х2 >
< дугме ид = 'буттон_оне' стил = 'видтх: 100пк; хеигхт:40пк; маргин-ригхт: 10пк;' онцлицк = 'алертИд(тхис.ид)' > 1 дугме >
< дугме ид = 'дугме_два' стил = 'ширина: 100 пиксела; висина: 40 пиксела;' онцлицк = 'алертИд(тхис.ид)' > два дугме >
див >
центар >
тело >
< скрипта >
функција алертИд ( ид ) {
узбуна ( ид )
}
скрипта >
хтмл >
Како добити ИД дугмета на које сте кликнули користећи јКуери?
јКуери такође има неколико различитих метода које се могу користити за добијање ИД-а дугмета на које сте кликнули. Почећемо са клик () метод који се примењује на селектор и узима име функције као опциони аргумент:
ДОЦТИПЕ хтмл >
< хтмл >
< тело >
< центар >
< див стил = 'маргин-топ: 50пк;' >
< х2 > Кликните на једно од следећих дугмади х2 >
< дугме ид = 'буттон_оне' стил = 'видтх: 100пк; хеигхт:40пк; маргин-ригхт: 10пк;' онцлицк = 'алертИд(тхис.ид)' > 1 дугме >
< дугме ид = 'дугме_два' стил = 'ширина: 100 пиксела; висина: 40 пиксела;' онцлицк = 'алертИд(тхис.ид)' > два дугме >
див >
центар >
тело >
< скрипта >
$ ( 'дугме' ) .кликните ( алертИд ( $ ( ово ) .аттр ( 'ид' ) ) ) ;
функција алертИд ( ид ) {
узбуна ( ид )
}
скрипта >
хтмл >
Такође можемо користити на() метод за прикључивање руковалаца догађаја елементима. Тхе на() метода узима најмање један догађај као аргумент заједно са неким другим опционим аргументима:
< хтмл >
< тело >
< центар >
< див стил = 'маргин-топ: 50пк;' >
< х2 > Кликните на једно од следећих дугмади х2 >
< дугме ид = 'буттон_оне' стил = 'видтх: 100пк; хеигхт:40пк; маргин-ригхт: 10пк;' онцлицк = 'алертИд(тхис.ид)' > 1 дугме >
< дугме ид = 'дугме_два' стил = 'ширина: 100 пиксела; висина: 40 пиксела;' онцлицк = 'алертИд(тхис.ид)' > два дугме >
див >
центар >
тело >
< скрипта >
$ ( 'дугме' ) .на ( 'кликни' , алертИд ( $ ( ово ) .аттр ( 'ид' ) ) ) ;
функција алертИд ( ид ) {
узбуна ( ид )
}
скрипта >
хтмл >
Закључак
ИД-у дугмета на које сте кликнули може се приступити и путем обичног ЈаваСцрипт-а и јКуери-ја. Разговарали смо о четири таква метода и дали детаљне детаље и релевантне примере у овом тексту.