如何从addEventListener JavaScript中的数组中跳过元素？
[英]How to skip an element from array in addEventListener javascript?
问题描述
i have a problem with my output. 
我的输出有问题。 What i am trying to do is make every tag element with a class name of "editable" have an event listener of "click" and when you click on that element a slidebar appears for optional edit. 我正在尝试做的是使类名称为“ editable”的每个标记元素都具有“ click”事件侦听器，并且当您单击该元素时，将出现一个滑动条以供可选编辑。 When i click on any of the elements and edit the innerHTML text it works fine, the problem is when i click on that second element and try to edit that other one both of the elements change. 当我单击任何一个元素并编辑innerHTML文本时，它都可以正常工作，问题是当我单击该第二个元素并尝试编辑其他两个元素都改变时。 What would i do to prevent the first element to not change? 我将如何防止第一个要素不变？
Thank you in advance! 先感谢您！
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>
1 个解决方案
解决方案1
0 2017-12-02 21:55:03
There is 有
element.innerHTML = value;
in the loop . 在循环中 。 Both <h1> and <p> have the same class name .editable . <h1>和<p>都具有相同的类名.editable 。 If you change <p> , it also affects the <h1> . 如果更改<p> ，它也会影响<h1> 。
Give them both an unique id and separate the loop and form-submit. 给他们两个都一个唯一的ID，并分开循环和表单提交。 Store the current clicked id. 存储当前单击的ID。 Access it when the form is submited. 提交表单后访问它。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.