У меня есть массив объектов, который выглядит так:

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>
0
Alan 14 Сен 2020 в 20:16

2 ответа

Лучший ответ

Вы должны использовать атрибут данных data-job, как говорили другие, тогда вы можете сделать это с помощью 3 шагов в обработчике кликов javascript.

  • 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>
1
user1601324 14 Сен 2020 в 18:58

Я бы посоветовал вам использовать атрибуты data-*, которые легко читать с помощью getAttribute (или data(), если вы используете jQuery).

Тогда вы можете достаточно легко прочитать job и id и преобразовать последние в индекс массива 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>
1
Jamiec 14 Сен 2020 в 17:39