主页 / 问题 / 1587642
Accepted
Назим Фаталиев
Asked:2024-07-19 16:38:17 +0000 UTC2024-07-19 16:38:17 +0000 UTC

为什么选择第一个块？

  • 772

我通过授权来完成，任何选项都可以。页面上有一个容器，容器中有 3 个块，每个块有一个按钮，当您单击任何“编辑”按钮时，我会转到第一个块。

const span = document.querySelector(".view"),
  btnVery = document.querySelectorAll(".very"),
  groupText1 = document.querySelector(".groupTextAll"),
  textarea = document.querySelector(".edit");
groupText1.addEventListener("click", function(event) {
  const btn = event.target.closest('button.very');
  if (!btn) return;
  span.classList.add("none");
  textarea.classList.remove("edit");
  textarea.value = span.innerHTML;
  span.after(textarea);
  textarea.focus();
});
body {
  background-color: #fbf2e9;
}

.group-btn {
  margin: 1em;
  display: flex;
  justify-content: space-between;
  gap: 1em;
}

.text-window {
  color: aliceblue;
  user-select: none;
}

button {
  user-select: none;
}

input {
  user-select: none;
}

.blockDnone {
  display: none;
}

.block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.9;
}

.block2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.closeWindow {
  width: 5vw;
  height: 5vh;
  font-weight: 900;
  color: black;
}

.groupTextAll {
  margin: 1em 0em;
}

.group {
  margin: 1em;
  padding: .5em 1em;
  border: 2px solid gray;
  border-radius: 1em;
}

.text {
  color: gray;
}

.subject-btn {
  display: flex;
  justify-content: space-between;
}

.edit {
  display: none;
}

.none {
  display: none;
}

textarea {
  background-color: bisque;
  width: 100%;
  height: 150px;
}

.none {
  display: none;
}
<div class="groupTextAll">
  <div class="group-btn">
    <button class="delAll">Удалить все</button>
    <button class="add">Добавить новость</button>
  </div>
  <div class="group">
    <button class="very">редактировать</button>
    <h2 class="subject-btn">Заголовок<button class="del">удалить</button></h2>
    <span class="text view">
        text
      </span>
    <textarea name="text" class="edit-1 edit"></textarea>
  </div>
  <div class="group">
    <button class="very">редактировать</button>
    <h2 class="subject-btn">Заголовок<button class="del">удалить</button></h2>
    <span class="text view">
        text
      </span>
    <textarea name="text" class="edit-2 edit"></textarea>
  </div>
  <div class="group">
    <button class="very">редактировать</button>
    <h2 class="subject-btn">Заголовок <button class="del">удалить</button></h2>
    <span class="text view">
       text
      </span>
    <textarea name="text" class="edit-3 edit"></textarea>
  </div>

其外观图片：

javascript

1 个回答

  1. Best Answer

    除了const groupText1 = document.querySelector(".groupTextAll");- 其余部分需要根据 来获取event.target，为此，请获取父级：

    const parent = event.target.closest('.group');

    并且从它已经 - span，button，textarea并且它们已经可以被操纵。

    const btn = parent.querySelector('button.very');
const span = parent.querySelector('.view');
const textarea = parent.querySelector('.edit');


    const groupText1 = document.querySelector(".groupTextAll");

groupText1.addEventListener("click", function(event) {
  const parent = event.target.closest('.group');
  const btn = parent.querySelector('button.very');
  if (!btn) return;
  const span = parent.querySelector('.view');
  const textarea = parent.querySelector('.edit');
  span.classList.add("none");
  textarea.classList.remove("edit");
  textarea.value = span.innerHTML;
  // span.after(textarea);
  textarea.focus();
});
    body {
  background-color: #fbf2e9;
}

.group-btn {
  margin: 1em;
  display: flex;
  justify-content: space-between;
  gap: 1em;
}

.text-window {
  color: aliceblue;
  user-select: none;
}

button {
  user-select: none;
}

input {
  user-select: none;
}

.blockDnone {
  display: none;
}

.block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.9;
}

.block2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.closeWindow {
  width: 5vw;
  height: 5vh;
  font-weight: 900;
  color: black;
}

.groupTextAll {
  margin: 1em 0em;
}

.group {
  margin: 1em;
  padding: .5em 1em;
  border: 2px solid gray;
  border-radius: 1em;
}

.text {
  color: gray;
}

.subject-btn {
  display: flex;
  justify-content: space-between;
}

.edit {
  display: none;
}

.none {
  display: none;
}

textarea {
  background-color: bisque;
  width: 100%;
  height: 150px;
}

.none {
  display: none;
}
    <div class="groupTextAll">
  <div class="group-btn">
    <button class="delAll">Удалить все</button>
    <button class="add">Добавить новость</button>
  </div>
  <div class="group">
    <button class="very">редактировать</button>
    <h2 class="subject-btn">Заголовок<button class="del">удалить</button></h2>
    <span class="text view">
        text1
      </span>
    <textarea name="text" class="edit-1 edit"></textarea>
  </div>
  <div class="group">
    <button class="very">редактировать</button>
    <h2 class="subject-btn">Заголовок<button class="del">удалить</button></h2>
    <span class="text view">
        text2
      </span>
    <textarea name="text" class="edit-2 edit"></textarea>
  </div>
  <div class="group">
    <button class="very">редактировать</button>
    <h2 class="subject-btn">Заголовок <button class="del">удалить</button></h2>
    <span class="text view">
       text3
      </span>
    <textarea name="text" class="edit-3 edit"></textarea>
  </div>

    • 0

相关问题