首頁 > web前端 > js教程 > 如何在 JavaScript 中單擊時從類別中提取資料屬性?

如何在 JavaScript 中單擊時從類別中提取資料屬性?

Mary-Kate Olsen
發布: 2024-11-28 15:33:15
原創
187 人瀏覽過

How to Extract a Data Attribute from a Class on Click in 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板