場合によっては、開発者は、ユーザーがクリックしたボタンの ID を知って、Web ページでの次のアクションを決定する必要があります。この記事でわかるように、これは標準の JavaScript と jQuery の両方で実行できます。それでは、始めましょう：
最初に、ページの中央に 2 つのボタンがある単純な HTML Web ページを作成します。
DOCTYPE html >
< html >
< 体 >
< 中心 >
< 分周 スタイル = 'マージントップ: 50px;' >
< h2 > 次のいずれかのボタンをクリックします h2 >
< ボタン ID = 'button_one' スタイル = '幅: 100px; 高さ: 40px; 右マージン: 10px;' > 1 ボタン >
< ボタン ID = 'button_two' スタイル = '幅: 100px; 高さ:40px;' > 2 ボタン >
分周 >
中心 >
体 >
html >
JavaScript を使用してクリックされたボタンの ID を取得する方法は?
いくつかの異なる方法で JavaScript を使用して、クリックされたボタンの ID を取得できます。最初のメソッドでは、すべてのボタン タグのノード リストを取得し、それらを変数に格納します。次に、ノードリストを繰り返し処理して、クリックされたボタンの ID を取得します。
< 脚本 >
var buttons = document.getElementsByTagName ( 'ボタン' ) ;
為に ( させて インデックス = 0 ;索引 < ボタンの長さ;索引++ ) {
ボタン [ 索引 ] .onclick = 関数 ( ) {
アラート ( this.id ) ;
}
}
脚本 >
各ボタンを設定することもできます オンクリック 個別にイベント:
DOCTYPE html >
< html >
< 体 >
< 中心 >
< 分周 スタイル = 'マージントップ: 50px;' >
< h2 > 次のいずれかのボタンをクリックします h2 >
< ボタン ID = 'button_one' スタイル = '幅: 100px; 高さ: 40px; 右マージン: 10px;' オンクリック = 「alertId(this.id)」 > 1 ボタン >
< ボタン ID = 'button_two' スタイル = '幅: 100px; 高さ:40px;' オンクリック = 「alertId(this.id)」 > 2 ボタン >
分周 >
中心 >
体 >
< 脚本 >
関数 アラート ID ( ID ) {
アラート ( ID )
}
脚本 >
html >
jQueryを使用してクリックされたボタンのIDを取得する方法は?
jQuery には、クリックされたボタンの ID を取得するために使用できるいくつかの異なるメソッドもあります。から始めましょう クリック（） セレクターに適用され、オプションの引数として関数名を取るメソッド:
DOCTYPE html >
< html >
< 体 >
< 中心 >
< 分周 スタイル = 'マージントップ: 50px;' >
< h2 > 次のいずれかのボタンをクリックします h2 >
< ボタン ID = 'button_one' スタイル = '幅: 100px; 高さ: 40px; 右マージン: 10px;' オンクリック = 「alertId(this.id)」 > 1 ボタン >
< ボタン ID = 'button_two' スタイル = '幅: 100px; 高さ:40px;' オンクリック = 「alertId(this.id)」 > 2 ボタン >
分周 >
中心 >
体 >
< 脚本 >
$ ( 'ボタン' ) 。クリック ( アラート ID ( $ ( これ ) .attr ( 「イド」 ) ) ) ;
関数 アラート ID ( ID ) {
アラート ( ID )
}
脚本 >
html >
また、 の上（） イベント ハンドラーを要素にアタッチするメソッド。の の上（） メソッドは、他のオプションの引数とともに、少なくとも 1 つのイベントを引数として取ります。
< html >
< 体 >
< 中心 >
< 分周 スタイル = 'マージントップ: 50px;' >
< h2 > 次のいずれかのボタンをクリックします h2 >
< ボタン ID = 'button_one' スタイル = '幅: 100px; 高さ: 40px; 右マージン: 10px;' オンクリック = 「alertId(this.id)」 > 1 ボタン >
< ボタン ID = 'button_two' スタイル = '幅: 100px; 高さ:40px;' オンクリック = 「alertId(this.id)」 > 2 ボタン >
分周 >
中心 >
体 >
< 脚本 >
$ ( 'ボタン' ) 。の上 ( 'クリック' 、アラート ID ( $ ( これ ) .attr ( 「イド」 ) ) ) ;
関数 アラート ID ( ID ) {
アラート ( ID )
}
脚本 >
html >
結論
クリックされたボタンの ID には、プレーンな JavaScript と jQuery の両方からアクセスできます。この記事では、そのような 4 つの方法について説明し、詳細な詳細と関連する例を示しました。