addEventListener에서 배열의 요소를 건너 뛰는 방법 javascript?

출력 결과에 문제가 있습니다. 내가 뭘 하려는지 "편집 할 수있는"클래스 이름 가진 모든 태그 요소를 "클릭하십시오"이벤트 수신기가 있고 해당 요소를 클릭하면 옵션 편집 슬라이드 바가 나타납니다. 요소 중 하나를 클릭하고 innerHTML 텍스트를 편집하면 문제가됩니다. 두 번째 요소를 클릭하고 두 번째 요소를 편집하려고하면 두 요소가 모두 변경됩니다. 첫 번째 요소가 변경되지 않도록하려면 어떻게해야합니까?addEventListener에서 배열의 요소를 건너 뛰는 방법 javascript?

미리 감사드립니다.

var elements = document.querySelectorAll(".editable"); 
 
var sidebar = document.querySelector(".sidebar"); 
 
var content = document.querySelector(".content"); 
 

 
elements.forEach(function(element){ 
 
    element.addEventListener('click', function(e){ 
 
    sidebar.style.display = "block"; 
 
    content.style.marginLeft = "300px"; 
 

 
    const form = document.forms['change-text']; 
 
    form.addEventListener('submit', function(eve){ 
 
     eve.preventDefault(); 
 
     const value = form.querySelector('input[type="text"]').value; 
 
     element.innerHTML = value; 
 
    }); 
 

 
    },true); 
 
});

html,body{ 
 
     margin: 0; 
 
     } 
 
     .editable:hover{ 
 
     border: 1px dashed #ccc; 
 
     } 
 
     .sidebar { 
 
     position: fixed; 
 
     width: 300px; 
 
     height: 100%; 
 
     background: #ccc; 
 
     padding: 20px; 
 
     box-sizing: border-box; 
 
     display: none; 
 
     transition: 1s; 
 
     } 
 
     .content { 
 
     margin-left: 0px; 
 
     height: auto; 
 
     width: auto; 
 
     position: relative; 
 
     overflow: auto; 
 
     z-index: 1; 
 
     padding: 20px; 
 
     box-sizing: border-box; 
 
     } 
 

 
     .info { 
 
      width: auto; 
 
      height: auto; 
 
      position: relative; 
 
     }

<body> 
 
    <div class="sidebar"> 
 
     <p>Enter text here:</p> 
 
     <form id="change-text"> 
 
     <input type="text" placeholder="Change text"> 
 
     <button>Save</button> 
 
     </form> 
 
    </div> 
 
    <div class="content"> 
 
     <div class="info"> 
 
      <h1 class="editable">Title</h1> 
 
      <p class="editable">Subtitle</p> 
 
     </div> 
 
    </div> 
 
    </body>

출처

2017-12-02 Cristian Hernandez

루프에서

element.innerHTML = value;

있습니다. <h1>과 <p>은 모두 동일한 클래스 이름 .editable입니다. <p>을 변경하면 <h1>에도 영향을줍니다.

그들에게 고유 한 ID와 별도의 루프와 양식 제출을 제공하십시오. 은 현재 클릭 된 ID를 저장합니다. 양식이 제출되면 액세스하십시오.

var elements = document.querySelectorAll(".editable"); 
 
var sidebar = document.querySelector(".sidebar"); 
 
var content = document.querySelector(".content"); 
 
var current; 
 

 
elements.forEach(function(element, i) { 
 
    element.addEventListener('click', function(e) { 
 
    sidebar.style.display = "block"; 
 
    content.style.marginLeft = "300px"; 
 
    current = this.id; // Current id 
 
    }); 
 
}); 
 

 
const form = document.forms['change-text']; 
 
form.addEventListener('submit', function(eve) { 
 
    eve.preventDefault(); 
 
    const value = form.querySelector('input[type="text"]').value; 
 
    document.getElementById(current).innerHTML = value; // Assign the input value to the current element 
 
});

html, 
 
body { 
 
    margin: 0; 
 
} 
 

 
.editable:hover { 
 
    border: 1px dashed #ccc; 
 
} 
 

 
.sidebar { 
 
    position: fixed; 
 
    width: 300px; 
 
    height: 100%; 
 
    background: #ccc; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
    display: none; 
 
    transition: 1s; 
 
} 
 

 
.content { 
 
    margin-left: 0px; 
 
    height: auto; 
 
    width: auto; 
 
    position: relative; 
 
    overflow: auto; 
 
    z-index: 1; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
} 
 

 
.info { 
 
    width: auto; 
 
    height: auto; 
 
    position: relative; 
 
}

<body> 
 
    <div class="sidebar"> 
 
    <p>Enter text here:</p> 
 
    <form id="change-text"> 
 
     <input type="text" placeholder="Change text"> 
 
     <button>Save</button> 
 
    </form> 
 
    </div> 
 
    <div class="content"> 
 
    <div class="info"> 
 
     <h1 id="title" class="editable">Title</h1> 
 
     <p id="subtitle" class="editable">Subtitle</p> 
 
    </div> 
 
    </div> 
 
</body>

출처

2017-12-02 21:55:03 Sun

addEventListener에서 배열의 요소를 건너 뛰는 방법 javascript?

답변

관련 문제