JavaScriptでクリック時にクラスからデータ属性を抽出する方法は?

JavaScript でのイベント リスナーとクラスベースの属性の抽出

JavaScript では、DOM と対話するために要素にイベント リスナーを追加することが重要です。この例では、クリックされたときにクラスから属性を取得することを目的としています。次のコードは、このアプローチを示しています。

var elements = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

このコードは、クラス名「classname」を持つ要素を選択し、それらを elements という名前の配列のようなオブジェクトに割り当て、要素をループします。要素ごとに、イベント リスナーが「click」イベントに追加され、要素がクリックされたときに myFunction 関数をトリガーします。この関数内で、getAttribute メソッドはクリックされた要素の「data-myattribute」値を取得し、その属性の値を含むアラートを表示します。

getElementsByClassName は配列ではなく、配列のようなオブジェクトを返すことに注意してください。したがって、各要素を走査してイベント リスナーを個別に追加するには、ループが必要です。

以上がJavaScriptでクリック時にクラスからデータ属性を抽出する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。