Question

我的输出有问题。我要做的是让每个标签元素的类名为＆＃34; editable＆＃34;有一个事件监听器＆＃34;点击＆＃34;当您单击该元素时，会出现一个滑动条以供可选编辑。当我点击任何元素并编辑innerHTML文本它工作正常，问题是当我点击第二个元素并尝试编辑其他两个元素更改。我该怎么做以防止第一个元素不改变？

提前谢谢！

＆＃13;

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);
});

＆＃13;

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;
       }

＆＃13;

<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>

＆＃13;

Answer 1

有

element.innerHTML = value;

循环中的

。 <h1>和<p>都具有相同的类名.editable。如果您更改<p>，则会影响<h1>。

为他们提供唯一ID和单独循环和表单提交。存储当前点击的ID。在提交表单时访问它。

＆＃13;

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
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: