使用 addEventlistener 修改對象

Question

我有一個看起來像這樣的對象數組：

 0: {name: "a", id: 0, trash: false} 1: {name: "b", id: 1, trash: false} 2: {name: "c", id: 2, trash: false} 3: {name: "d", id: 3, trash: false} 4: {name: "e", id: 4, trash: false} 5: {name: "f", id: 5, trash: false}

我編寫了這段代碼，每次單擊時將trash值從true更改為false 。

 list.addEventListener("click", (e) => { if (e.target.classList.contains("delete")) { e.target.parentElement.remove(); console.log((listTodo[2].trash = true)); console.log(listTodo); } });

我知道以這種方式寫作我只會碰巧特定對象的值（在這種情況下是位置 2 的對象）。

所以，我想要做的是深入點擊對象並更改值。

這是代碼的 HTML 部分的片段，以提供一個想法。

 <li class="list-group-item d-flex justify-content-between align-items-center"> <span>lorem1234</span><i class="far fa-trash-alt delete" job="delete" id=5></i> </li>

Answer 1

我建議您使用data-*屬性，這些屬性很容易通過getAttribute （或data()如果您碰巧使用 jQuery）讀取。

然后你可以很容易地讀取job和id並將后者轉換為listTodo數組的listTodo 。

 var listTodo = [{name: "a", id: 0, trash: false}, {name: "b", id: 1, trash: false}, {name: "c", id: 2, trash: false}]; var list = document.querySelector("#my-list"); list.addEventListener("click", (e) => { if (e.target.getAttribute("data-job") == "delete") { e.target.parentElement.remove(); var idx = parseInt(e.target.getAttribute("data-id"),10); console.log((listTodo[idx].trash = true)); console.log(listTodo); } });

 <script src="https://kit.fontawesome.com/a076d05399.js"></script> <ul id="my-list"> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>lorem1</span><i class="far fa-trash-alt delete" data-job="delete" data-id="0"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>lorem2</span><i class="far fa-trash-alt delete" data-job="delete" data-id="1"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>lorem3</span><i class="far fa-trash-alt delete" data-job="delete" data-id="2"></i> </li> </ul>

Answer 2

您應該像其他人所說的那樣使用數據屬性data-job ，然后您可以在 javascript 單擊處理程序中通過 3 個步驟來完成此操作。

• 1：檢查被點擊的元素是否有data-job="delete" 。 這很容易使用dataset屬性if (e.target.dataset.job == "delete")
• 2：從DOM中移除e.target.parentElement.remove();
• 3：更改數組中的“垃圾”值。 你得到被點擊元素的id e.target.id並將其用作數組鍵： listTodo[e.target.id].trash = true;

就這樣。 接下來是 javascript 函數，然后是下面顯示它工作的片段。

var list = document.getElementById("list");
list.addEventListener("click", (e) => {

    // Check if the clicked element has the data-job="delete"
    if (e.target && e.target.dataset.job == "delete") {

        // Remove the element from the DOM
        e.target.parentElement.remove();

        // set trash to true for this element in the array using this id as the array key
        listTodo[e.target.id].trash = true;
  }
});

 var listTodo = { 0: {name: "a", id: 0, trash: false}, 1: {name: "b", id: 1, trash: false}, 2: {name: "c", id: 2, trash: false}, 3: {name: "d", id: 3, trash: false}, 4: {name: "e", id: 4, trash: false}, 5: {name: "f", id: 5, trash: false} }; var list = document.getElementById("list"); list.addEventListener("click", (e) => { // check if the clicked element has the data-job="delete" if (e.target && e.target.dataset.job == "delete") { // Remove the clicked element from the DOM e.target.parentElement.remove(); // Set trash=true for the clicked element using the id as the array key listTodo[e.target.id].trash = true; console.log ("Deleting element "+e.target.id); } });

 i { display: block; height: 20px; width: 20px; margin-left: 10px;}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" /> <ul id="list"> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>0</span><i class="far fa-trash-alt delete" data-job="delete" id="0"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>1</span><i class="far fa-trash-alt delete" data-job="delete" id="1"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>2</span><i class="far fa-trash-alt delete" data-job="delete" id="2"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>3</span><i class="far fa-trash-alt delete" data-job="delete" id="3"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>4</span><i class="far fa-trash-alt delete" data-job="delete" id="4"></i> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <span>5</span><i class="far fa-trash-alt delete" data-job="delete" id="5"></i> </li> </ul>