[! [введите здесь описание изображения] [1]] [1] Я хотел создать простое приложение для рисования, раскрашивая фон квадратов, щелкая по ним. Я добавил событие щелчка для каждого li, которое меняет цвет фона, добавляя класс. Однако я бы хотел перейти на следующий уровень, добавив 4 кнопки, которые изменяли бы цвета подсветки. Кто-нибудь может мне с этим помочь?

Итак, моя проблема: как нажать кнопку (li в заголовке), которая выберет цвет для моего исходного прослушивателя событий на ul class = grid li?

 <header>
      <ul class="header">
        <li class="black">Black</li>
        <li class="red">Red</li>
        <li class="blue">Blue</li>
        <li class="orange">Orange</li>
      </ul>
    </header>
    <ul class="grid">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      .......
     
const myElements = document.getElementsByTagName("li");
for (let i = 0; i < myElements.length; i++) {
  myElements[i].addEventListener("click", function () {
    let selected = myElements[i];
    selected.classList.toggle("highlight");
  });
}

Я пробовал (удалить и добавить новый класс, заменить класс, переключить)

black.addEventListener("click", function () {
  selected.classList.replace("highlight", "black");
});

Но смена цвета фона бывает разовой. Я хочу, чтобы новый класс стал постоянным. 1]: https://i.stack.imgur.com/Fgg87.png

2
TomDev 10 Окт 2021 в 11:13

2 ответа

Лучший ответ

Вы добьетесь этого, добавив прослушиватели событий к вашим ul.header li и ul.grid li. ul.header li прослушиватель событий щелчка сохранит нужный цвет, а щелчок ul.grid li будет использовать этот сохраненный цвет для его применения.

var selcolor = '';

const colorbtns = document.querySelectorAll('ul.header > li');
const griditems = document.querySelectorAll('ul.grid > li');

colorbtns.forEach(function(el) {
    el.addEventListener("click", function(e) {
    selcolor = e.target.className;
    console.log(selcolor);
  });
});

griditems.forEach(function(el) {
    el.addEventListener("click", function(e) {
       if(el.classList.length <= 0) {
           el.classList.add(selcolor);
       }
   });
});
.header li {
  display:inline-block;
  color:#fff;
  padding:5px;
}

.grid li {
  width:50px;
  height:50px;
  display:inline-block;
  border:1px solid black;
}

.black { background-color:black; }
.red { background-color:red; }
.blue { background-color:blue; }
.orange { background-color:orange; }
<header>
  <ul class="header">
    <li class="black">Black</li>
    <li class="red">Red</li>
    <li class="blue">Blue</li>
    <li class="orange">Orange</li>
  </ul>
</header>
<ul class="grid">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

ИЗМЕНИТЬ

Обновил код

el.addEventListener("click", function(e) {
    el.classList.add(selcolor);
});

Чтобы

el.addEventListener("click", function(e) {
    if(el.classList.length <= 0) {
        el.classList.add(selcolor);
    }
  });

Таким образом, вы можете назначить цвет только один раз в соответствии с вашим комментарием.

Но смена цвета фона только разовая

1
slashroot 10 Окт 2021 в 09:38

В этом случае вам лучше использовать селекторы запросов в JavaScript.

const myElements = document.querySelectorAll("div.grid > li");

Вы можете прочитать об этом здесь: https://developer.mozilla.org/en-US/ docs / Web / API / Document / querySelector и https://developer.mozilla.org/en-US/ docs / Web / API / Document / querySelectorAll

0
Mukhammadyusuf Abdurakhimov 10 Окт 2021 в 08:31