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

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(){
   $("#item").setAttribute("contenteditable", "true")
}

Answer 2

怎么样

function edit() {
    document.getElementById('item').setAttribute('contentEditable','true');
}

Answer 3

尝试：

function edit(){
   document.getElementById('item').setAttribute('contenteditable',true);
}

Answer 4

<html>
  <body>
    <ul>
      <li v-for="item in items" contenteditable="false" id="item>{{item}}</li>
    </ul>
    <button type="button" id="editButton" contenteditable="false">
  </body>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function(){
      $('#editButton').on('click', function(){
        $('#item').attr('contenteditable', 'true');
        // or
        // $('#item').prop('contenteditable', true);
      });
    });
  </script>
</html>

希望对您有所帮助

Answer 5

使用该事件确定单击了哪个按钮和 select 父按钮。比你可以设置属性

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>

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

How to change the boolean value of one element when another is clicked in HTML via JavaScript?

html

javascript

pseudocode

contenteditable

html-lists