2017-04-04 1 views
0

사용자 입력에 의해 목록이 만들어 지므로 각 요소를 사용자가 편집 할 수 있도록 목록을 만들려고합니다. 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; 
    } 
} 
+0

이 의사 코드는 이론적으로 마법처럼 작동합니다 ... whatts 문제를 설정할 수 있습니다보다? – Konstantinos

+0

버튼이 리에 있으니? 따라서 이벤트 대상을 사용하여 버튼을 가져오고, 부모를 선택하고, 속성을 설정하십시오. – epascarello

+0

그리고 모든 대답은 하나 있다고 가정합니다 ... 동일한 ID를 가진 요소가 여러 개있을 것이므로 ID가 틀리기 때문에 템플릿이라는 것을 알 수 있습니다. – epascarello

답변

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>

1

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

+0

jquery를 일반 javascript와 혼합한다고 생각합니다. setAttribute는 attr이어야합니다. – jas7457

+0

setAttribute는 jquery의 함수입니다. –

+0

@PrakashSundar 어떤 버전입니까 ?? 그것은 attr()입니다 http://api.jquery.com/attr/ – epascarello

1

방법에 대한

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

시도는 :

function edit(){ 
    document.getElementById('item').setAttribute('contenteditable',true); 
} 
0
<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> 

희망이 당신

관련 문제