javascript - 数据类别 - 点击修改

Question

我想知道一旦点击事件发生，是否有一种方法可以将新的数据类别添加到现有的数据类别中？我想添加它，因为我将它用作过滤元素。

下面的示例：单击按钮并添加类别：Delta

<div class="item" data-category="Alfa , Beta , Gamma "> 

<p> Object 1<p>

<div>

<button class="my-fav">

标签： javascriptjqueryhtml

Answer 1

您可以获取元素的属性并更改它然后再次设置它，这是一个示例：

<div id="data" class="item" data-category="Alfa , Beta , Gamma "> 
    <p> Object 1<p>
</div>
<button id="myButton" class="my-fav">

<script>
    const data = document.getElementById("data");
    const button = document.getElementById("myButton");

    let data_attribute = data.getAttribute("data-category");

    myButton.addEventListener("click", function() {
        data_attribute += ", Delta";
        data.setAttribute("data-category", data_attribute);
    });
</script>