javascript - 如何通过 JavaScript 在 HTML 中单击另一个元素时更改一个元素的 bool 值？

Question

我正在尝试创建一个列表，以便用户可以编辑每个元素，因为该列表是由用户输入创建的。我刚刚开始使用 JavaScript，并且仍在学习中。我可以用什么替换伪代码部分来产生所需的效果？

HTML:

<li v-for="item in items" contenteditable="false" id="item">{{item}}
    <button id="editButton" contenteditable="false" onclick="edit()">Edit</button>

JS(伪代码):

function edit(){
    when "editButton" is clicked{
        "contenteditability" in "item" = true;
    }
}

Answer 1

使用该事件来确定单击了哪个按钮并选择父级。您可以设置属性

function edit(event) {
  var button = event.target,
    li = button.parentNode;
  li.setAttribute("contentEditable", true)
}

<ul>
  <li contenteditable="false"> AAAAA
    <button contenteditable="false" onclick="edit(event)">Edit</button></li>
  <li contenteditable="false"> BBBBB
    <button contenteditable="false" onclick="edit(event)">Edit</button></li>
  <li contenteditable="false"> CCCCC
    <button contenteditable="false" onclick="edit(event)">Edit</button></li>
</ul>