如何使用 jQuery 根據元素的資料屬性值為元素新增類別？

jQuery：透過資料屬性值找出元素

在HTML 標記中，元素可以使用data-* 為其指派自訂資料屬性屬性語法。這些屬性通常用於儲存可由 JavaScript 程式碼存取或操作的附加資訊。

一個常見用例是根據元素的資料屬性值將特定類別加入元素。例如，考慮以下HTML 元素：

<a class="slide-link" href="#" data-slide="0">1</a><br><a class="slide-link" href="#" data-slide="1">2</a><br><a class="slide-link" href="#" data-slide="2">3<br></a>

我們的目標是增加一個「活躍」類別到data-slide 屬性值為0（零）的元素。

屬性等於Selector

jQuery 提供了一個屬性等於選擇器，它允許我們根據特定屬性的確切值來選擇元素。為了實現我們的目標，我們可以使用以下程式碼：

$('.slide-link[data-slide="0"]').addClass('active');<br> 

此程式碼選擇類別為「slide-link」且data-slide 屬性等於「0」的元素。然後添加“active”類別。

理解 .find()

最初嘗試中使用的 .find() 方法有效透過遍歷 DOM 樹。但是，在這種情況下，我們希望根據其資料屬性而不是其後代來選擇元素。因此，使用屬性 equals 選擇器更適合此任務。

以上是如何使用 jQuery 根據元素的資料屬性值為元素新增類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！