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

我想做一个列表，使每个元素都可以由用户编辑，因为列表是由用户输入创建的。我刚开始使用JavaScript，并且仍在学习。我可以用什么替换伪代码部分来产生所需的效果？如何通过JavaScript在HTML中单击另一个元素时更改一个元素的布尔值？

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; 
    } 
}

来源

2017-04-04 user147219

这个伪代码理论上就像一个魅力... whatts问题？ – Konstantinos

所以这个按钮在李？因此，使用事件目标来获取按钮，选择父项并设置属性。 – epascarello

所有的答案都假设有一个......你可以看到它是一个模板，所以id是错误的，因为会有多个具有相同id的元素。 – epascarello

使用事件，以确定到底点击了哪个按钮，并选择父。比你可以设置属性

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>

来源

2017-04-04 22:20:35 epascarello

function edit(){ 
 
    $("#item").setAttribute("contenteditable", "true") 
 
}

来源

2017-04-04 22:09:09

我想你是混合使用纯javascript的jquery ...''setAttribute'应该''attr' – jas7457

setAttribute是一个jQuery中的函数.. –

@PrakashSundar什么版本？它是attr（）http://api.jquery.com/attr/ – epascarello

如何

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

来源

2017-04-04 22:09:22 user3094755

尝试：

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

来源

2017-04-04 22:09:42

<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>

希望这可以帮助你

来源

2017-04-04 22:12:10 TypedSource

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

回答

相关问题