第二个 Instagram 按钮的 CSS 属性

Question

Назим Фаталиев

Asked:2024-07-19 22:15:20 +0000 UTC2024-07-19 22:15:20 +0000 UTC 2024-07-19 22:15:20 +0000 UTC

为什么新创建的元素不被隐藏？

772

当你点击隐藏新闻按钮时，已经存在的元素被隐藏，如果你创建一个新的元素，你无法隐藏它，我无法理解原因。

"use strict";
//для полного удаления
const groupText1 = document.querySelector(".groupTextAll"),
  btnOne = document.querySelector(".del"),
  group = document.querySelectorAll(".group"),
  allRemove = document.querySelector(".delAll");
  for (const divBlock of group) {
  groupText1.addEventListener("click", (event) => {
    const btn = event.target.closest("button.delAll");
    if (!btn) return;
    divBlock.classList.toggle('none');
    btn.textContent =
    btn.textContent === "Скрыть новости" ? "Показать новости" : "Скрыть новости";
  });
}


//удаление по одной

groupText1.addEventListener("click", (event) => {
  const 
  btn = event.target.closest(".del");
  if (!btn) return;
  let group = event.target.closest('.group')
  group.remove();
});

//кнопка редакции новостей span

groupText1.addEventListener("click", function (event) {
  const parent = event.target.closest(".group"),
        btn = event.target.closest('.very');
  if (!btn) return;
     const
        span = parent.querySelector(".view"),
        textarea = parent.querySelector(".edit");
  span.classList.add("none");
  textarea.classList.remove("edit");
  textarea.value = span.innerHTML;
  textarea.focus();
  
  textarea.addEventListener("blur", function () {
    span.innerHTML = textarea.value;
    textarea.classList.add("edit");
    span.classList.remove("none");
  });

  textarea.addEventListener("keydown", function (event) {
    if (event.code == "Enter") textarea.blur();
  });
});





// делегирование - кнопка добавления

const btnAdd = document.querySelector("button.add");

groupText1.addEventListener("click", (event) => {
  const div2 = event.target.closest(".groupTextAll"),
    //делегирование
    btn = event.target.closest("button.add");
  if (!btn) return;
  //создание
  const div = document.createElement("div"),
       divGroupBtn = document.createElement('div'),
    h2 = document.createElement("h2"),
    btnRedact = document.createElement("button"),
    btnDel = document.createElement("button"),
    span = document.createElement("span"),
    textarea = document.createElement("textarea");

  //добавление классов
  textarea.classList.add("edit-1", "edit");
  div.classList.add("group");
  divGroupBtn.classList.add("subject-btn");
  btnDel.classList.add("del");
  btnRedact.classList.add("very");
  span.classList.add("text", "view");
  //вложение тегов
  div.append(divGroupBtn);
  divGroupBtn.append(btnRedact, btnDel);
  div.append(h2);
  div.append(span);
  div.append(textarea);
  h2.append("Заголовок");
  btnRedact.append("Редактировать");
  btnDel.append("Удалить");
  span.append("Текст");
  div2.append(div);
});

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



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


.none {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="news.css" />
    <title>Document</title>
  </head>
  <body id="all">
    <div class="groupTextAll">
      <div class="group-btn">
        <button class="delAll">Скрыть новости</button>
        <button class="add">Добавить новость</button>
      </div>
      <div class="group">
        <div class="subject-btn">
        <button class="very">редактировать</button>
        <button class="del">удалить</button>
      </div>
        <h2 class="vi">
          Муфтий призвал наказать блогера, который растоптал и оплевал
          православный крест
        </h2>
        <span class="text view">
          Глумившегося над православным крестом блогера из Дагестана необходимо
          строго наказать по российскому законодательству, заявил РИА Новости
          председатель Координационного центра мусульман Северного Кавказа
          муфтий Исмаил Бердиев.РИА Новости Исмаил Бердиев Ранее с просьбой
          привлечь блогера к ответственности в МВД и Генпрокуратуру обратился
          глава комитета Госдумы по информполитике Александр Хинштейн.Телеканал
          360° 17 июля в сети появилось видео, на котором дагестанский стример
          топчет ногами православный крест.Lenta.ru Следственный комитет
          возбудил уголовное дело по ч. 1 ст. 148 Уголовного кодекса — нарушение
          права на свободу совести и вероисповеданий.
        </span>
        <textarea name="text" class="edit-1 edit"></textarea>
      </div>
      <div class="group">
        <div class="subject-btn">
        <button class="very">редактировать</button>
        <button class="del">удалить</button>
      </div>
        <h2 class="vi">
          Лавров обратился к постпреду США в СБ ООН и спросил, не ошиблась ли
          она комнатой
        </h2>
        <span class="text view">
          Министр иностранных дел РФ Сергей Лавров, выступая в ходе заседания
          Совбеза ООН, посвященного кризису на Ближнем Востоке, обратился к
          постпреду США Линде Томас-Гринфилд.РИА Новости Поводом для такого
          обращения послужило выступление постпреда США на предыдущем заседании
          Совбеза ООН, организованном Россией и посвященном многостороннему
          сотрудничеству, где Гринфилд сосредоточила внимание на украинском
          кризисе.URA.Ru «Слушая сегодня представителя Израиля, у вас не
          возникло ощущение, что вы ошиблись комнатой и пришли не на ту
          дискуссию, которая была объявлена? Надеюсь, понятно, о чем я говорю»,
          — обратился Лавров к Гринфилд (цитата по ТАСС).РБК Сегодня постпред
          Израиля, который ранее выступил на дебатах в Совбезе по
          ближневосточному кризису, активно критиковал Иран и заявил, что
          Тегеран "поставляет военное оборудование, которое потом используется
          против украинцев".РИА Новости
        </span>
        <textarea name="text" class="edit-2 edit"></textarea>
      </div>
      <div class="group">
        <div class="subject-btn">
        <button class="very">редактировать</button>
        <button class="del">удалить</button>
      </div>
        <h2 class="vi">
          Путин поручил перейти к масштабному внедрению цифрового рубля
        </h2>
        <span class="text view">
          Платформа цифрового рубля продемонстрировала свою
          работоспособность.Газета.Ru России необходимо не упустить момент —
          своевременно настраивать правовую базу, развивать инфраструктуру,
          создавать условия для обращения цифровых активов как внутри страны,
          так и в отношениях с зарубежными партнерами, заявил Путин.ТВ Центр
          "Нужно сделать следующий шаг: перейти к более широкому внедрению
          цифрового рубля в экономику, хозяйственную деятельность и в сферу
          финансов", — отметил Путин.Газета.Ru Банк России с 1 сентября расширит
          пилот цифрового рубля на реальных клиентах с реальными деньгами,
          сообщила первый зампред ЦБ Ольга Скоробогатова на Финансовом
          конгрессе.
        </span>
        <textarea name="text" class="edit-3 edit"></textarea>
      </div>
    </div>
    <script src="news.js"></script>
  </body>
</html>

1 个回答

Voted

EzioMercer · Answer 1 · 2024-07-24T18:22:23Z

干得好！

我想为您提供一些改进代码的技巧：

文本通常被划分为标签p，而不是span。span当您需要突出显示整个文本的某些部分时使用，例如突出显示特定单词或更改颜色等。
当您编写时group = document.querySelectorAll(".group")，它会查找页面上已经存在的元素；当添加新元素时，它们将被忽略。因此，我可以为您提供的选项之一是将其转换为每次都会调用的函数，并再次搜索整个元素列表
如果您需要检索或安装文本数据，请使用textContent，而不是innerHTML。并且不需要使用设置文本append

append可以采用多个参数，因此可以代替：

container.append(div1);
container.append(div2);
container.append(div3);
...

你可以写：

conatiner.append(div1, div2, div3, ...)

当您有很多元素并且它们的数量可以动态更改时，应该使用委托，但如果您有 1 个或几个按钮，那么直接将侦听器附加到它们会更容易
你还应该更好地命名变量的名称，不要看到它们完全相等，因为不太清楚它们是什么

"use strict";

//для полного удаления
const groupText = document.querySelector(".groupTextAll");
const btnOne = document.querySelector(".del");
const getAllGroups = () => document.querySelectorAll(".group");
const allRemove = document.querySelector(".delAll");
const btnAdd = document.querySelector("button.add");

allRemove.addEventListener("click", (event) => {
  const btn = event.target.closest("button.delAll");

  if (!btn) return;

  getAllGroups().forEach(group => group.classList.toggle('none'));

  allRemove.textContent = allRemove.textContent === "Скрыть новости" ? "Показать новости" : "Скрыть новости";
});


//удаление по одной
groupText.addEventListener("click", (event) => {
  const btn = event.target.closest(".del");

  if (!btn) return;

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

  group.remove();
});

//кнопка редакции новостей span
groupText.addEventListener("click", function(event) {
  const parent = event.target.closest(".group");
  const btn = event.target.closest('.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.textContent;
  textarea.focus();

  textarea.addEventListener("blur", function() {
    span.textContent = textarea.value;
    textarea.classList.add("edit");
    span.classList.remove("none");
  });

  textarea.addEventListener("keydown", function(event) {
    if (event.code == "Enter") textarea.blur();
  });
});

// делегирование - кнопка добавления
groupText.addEventListener("click", (event) => {
  const groups = event.target.closest(".groupTextAll");
  const btn = event.target.closest("button.add");

  if (!btn) return;

  //создание
  const group = document.createElement("div");
  const divGroupBtn = document.createElement('div');
  const h2 = document.createElement("h2");
  const btnRedact = document.createElement("button");
  const btnDel = document.createElement("button");
  const span = document.createElement("span");
  const textarea = document.createElement("textarea");

  //добавление классов
  textarea.classList.add("edit-1", "edit");
  group.classList.add("group");
  divGroupBtn.classList.add("subject-btn");
  btnDel.classList.add("del");
  btnRedact.classList.add("very");
  span.classList.add("text", "view");

  //добавление текстов
  h2.textContent = "Заголовок";
  btnRedact.textContent = "Редактировать";
  btnDel.textContent = "Удалить";
  span.textContent = "Текст";

  //вложение тегов
  divGroupBtn.append(btnRedact, btnDel);

  group.append(divGroupBtn, h2, span, textarea);

  groups.append(group);
});

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

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

.none {
  display: none;
}

<div class="groupTextAll">
  <div class="group-btn">
    <button class="delAll">Скрыть новости</button>
    <button class="add">Добавить новость</button>
  </div>
  <div class="group">
    <div class="subject-btn">
      <button class="very">редактировать</button>
      <button class="del">удалить</button>
    </div>
    <h2 class="vi">
      Муфтий призвал наказать блогера, который растоптал и оплевал православный крест
    </h2>
    <p class="text view">
      Глумившегося над православным крестом блогера из Дагестана необходимо строго наказать по российскому законодательству, заявил РИА Новости председатель Координационного центра мусульман Северного Кавказа муфтий Исмаил Бердиев.РИА Новости Исмаил Бердиев
      Ранее с просьбой привлечь блогера к ответственности в МВД и Генпрокуратуру обратился глава комитета Госдумы по информполитике Александр Хинштейн.Телеканал 360° 17 июля в сети появилось видео, на котором дагестанский стример топчет ногами православный
      крест.Lenta.ru Следственный комитет возбудил уголовное дело по ч. 1 ст. 148 Уголовного кодекса — нарушение права на свободу совести и вероисповеданий.
    </p>
    <textarea name="text" class="edit-1 edit"></textarea>
  </div>
  <div class="group">
    <div class="subject-btn">
      <button class="very">редактировать</button>
      <button class="del">удалить</button>
    </div>
    <h2 class="vi">
      Лавров обратился к постпреду США в СБ ООН и спросил, не ошиблась ли она комнатой
    </h2>
    <p class="text view">
      Министр иностранных дел РФ Сергей Лавров, выступая в ходе заседания Совбеза ООН, посвященного кризису на Ближнем Востоке, обратился к постпреду США Линде Томас-Гринфилд.РИА Новости Поводом для такого обращения послужило выступление постпреда США на предыдущем
      заседании Совбеза ООН, организованном Россией и посвященном многостороннему сотрудничеству, где Гринфилд сосредоточила внимание на украинском кризисе.URA.Ru «Слушая сегодня представителя Израиля, у вас не возникло ощущение, что вы ошиблись комнатой
      и пришли не на ту дискуссию, которая была объявлена? Надеюсь, понятно, о чем я говорю», — обратился Лавров к Гринфилд (цитата по ТАСС).РБК Сегодня постпред Израиля, который ранее выступил на дебатах в Совбезе по ближневосточному кризису, активно
      критиковал Иран и заявил, что Тегеран "поставляет военное оборудование, которое потом используется против украинцев".РИА Новости
    </p>
    <textarea name="text" class="edit-1 edit"></textarea>
  </div>
  <div class="group">
    <div class="subject-btn">
      <button class="very">редактировать</button>
      <button class="del">удалить</button>
    </div>
    <h2 class="vi">
      Путин поручил перейти к масштабному внедрению цифрового рубля
    </h2>
    <p class="text view">
      Платформа цифрового рубля продемонстрировала свою работоспособность.Газета.Ru России необходимо не упустить момент — своевременно настраивать правовую базу, развивать инфраструктуру, создавать условия для обращения цифровых активов как внутри страны,
      так и в отношениях с зарубежными партнерами, заявил Путин.ТВ Центр "Нужно сделать следующий шаг: перейти к более широкому внедрению цифрового рубля в экономику, хозяйственную деятельность и в сферу финансов", — отметил Путин.Газета.Ru Банк России
      с 1 сентября расширит пилот цифрового рубля на реальных клиентах с реальными деньгами, сообщила первый зампред ЦБ Ольга Скоробогатова на Финансовом конгрессе.
    </p>
    <textarea name="text" class="edit-1 edit"></textarea>
  </div>
</div>

为什么新创建的元素不被隐藏？

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

为什么新创建的元素不被隐藏？

1 个回答

相关问题