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

Z时代
2024-01-10
分类：问答

我的输出有问题。我想要做的是让每个标签元素的类名称为“可编辑”都有一个“单击”的事件监听器，并且当您单击该元素时会出现一个用于可选编辑的滑动条。当我单击任何元素并编辑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>