Bazen bir geliştirici, bir web sayfasında daha fazla eylem planına karar vermek için kullanıcının tıkladığı düğmenin kimliğini bilmelidir. Bu yazıda göreceğiniz gibi, bu hem Vanilla JavaScript hem de jQuery aracılığıyla yapılabilir. Öyleyse başlayalım:
İlk olarak, sayfanın ortasında iki düğme bulunan basit bir HTML web sayfası oluşturacağız:
DOCTYPE html >
< html >
< gövde >
< merkez >
< div stil = 'üst kenar boşluğu: 50 piksel;' >
< h2 > Aşağıdaki düğmelerden birini tıklayın h2 >
< buton İD = 'button_one' stil = 'genişlik: 100 piksel; yükseklik: 40 piksel; sağ kenar boşluğu: 10 piksel;' > 1 buton >
< buton İD = 'düğme_iki' stil = 'genişlik: 100 piksel; yükseklik: 40 piksel;' > iki buton >
div >
merkez >
gövde >
html >
JavaScript Kullanarak Tıklanan Düğmenin Kimliği Nasıl Alınır?
JavaScript'i kullanarak tıklanan düğmenin kimliğini birkaç farklı yöntemle alabiliriz. İlk yöntemimizde, tüm buton etiketlerinin düğüm listesini alacağız ve bunları bir değişken içinde saklayacağız. Ardından, tıklanan düğmenin kimliğini almak için düğüm listesini yineleyeceğiz:
< senaryo >
var düğmeleri = document.getElementsByTagName ( 'buton' ) ;
için ( İzin Vermek indeks = 0 ; dizin < düğmeler.uzunluk; dizin++ ) {
düğmeler [ dizin ] .onclick = işlev ( ) {
Alarm ( this.id ) ;
}
}
senaryo >
Ayrıca her düğmeyi şu şekilde ayarlayabiliriz: tıklamada olay tek tek:
DOCTYPE html >
< html >
< gövde >
< merkez >
< div stil = 'üst kenar boşluğu: 50 piksel;' >
< h2 > Aşağıdaki düğmelerden birini tıklayın h2 >
< buton İD = 'button_one' stil = 'genişlik: 100 piksel; yükseklik: 40 piksel; sağ kenar boşluğu: 10 piksel;' tıklamada = 'alertId(this.id)' > 1 buton >
< buton İD = 'düğme_iki' stil = 'genişlik: 100 piksel; yükseklik: 40 piksel;' tıklamada = 'alertId(this.id)' > iki buton >
div >
merkez >
gövde >
< senaryo >
işlev uyarı kimliği ( İD ) {
Alarm ( İD )
}
senaryo >
html >
JQuery Kullanarak Tıklanan Düğmenin Kimliği Nasıl Alınır?
jQuery ayrıca tıklanan bir düğmenin kimliğini almak için kullanılabilecek birkaç farklı yönteme sahiptir. ile başlayacağız Tıklayın() bir seçiciye uygulanan ve isteğe bağlı bir argüman olarak bir işlev adı alan yöntem:
DOCTYPE html >
< html >
< gövde >
< merkez >
< div stil = 'üst kenar boşluğu: 50 piksel;' >
< h2 > Aşağıdaki düğmelerden birini tıklayın h2 >
< buton İD = 'button_one' stil = 'genişlik: 100 piksel; yükseklik: 40 piksel; sağ kenar boşluğu: 10 piksel;' tıklamada = 'alertId(this.id)' > 1 buton >
< buton İD = 'düğme_iki' stil = 'genişlik: 100 piksel; yükseklik: 40 piksel;' tıklamada = 'alertId(this.id)' > iki buton >
div >
merkez >
gövde >
< senaryo >
$ ( 'buton' ) .Tıklayın ( uyarı kimliği ( $ ( Bu ) .attr ( 'İD' ) ) ) ;
işlev uyarı kimliği ( İD ) {
Alarm ( İD )
}
senaryo >
html >
Biz de kullanabiliriz üzerinde() Olay işleyicilerini öğelere ekleme yöntemi. bu üzerinde() yöntem, diğer bazı isteğe bağlı bağımsız değişkenlerle birlikte en az bir olayı bağımsız değişken olarak alır:
< html >
< gövde >
< merkez >
< div stil = 'üst kenar boşluğu: 50 piksel;' >
< h2 > Aşağıdaki düğmelerden birini tıklayın h2 >
< buton İD = 'button_one' stil = 'genişlik: 100 piksel; yükseklik: 40 piksel; sağ kenar boşluğu: 10 piksel;' tıklamada = 'alertId(this.id)' > 1 buton >
< buton İD = 'düğme_iki' stil = 'genişlik: 100 piksel; yükseklik: 40 piksel;' tıklamada = 'alertId(this.id)' > iki buton >
div >
merkez >
gövde >
< senaryo >
$ ( 'buton' ) .üzerinde ( 'Tıklayın' , uyarı kimliği ( $ ( Bu ) .attr ( 'İD' ) ) ) ;
işlev uyarı kimliği ( İD ) {
Alarm ( İD )
}
senaryo >
html >
Çözüm
Tıklanan bir düğmenin kimliğine hem düz JavaScript hem de jQuery aracılığıyla erişilebilir. Bu tür dört yöntemi tartıştık ve bu yazıda derinlemesine ayrıntı ve ilgili örnekler verdik.