如何在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>

答

有

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>

如何在addEventListener javascript中跳过数组中的元素？

相关推荐