Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как можно получить второй class ? (https://javascript.ru/forum/dom-window/81716-kak-mozhno-poluchit-vtorojj-class.html)

maxim1978 17.01.2021 08:27
Как можно получить второй class ?
 
Имеем div с двумя class. Выглядит это так

Код:
<div class="item red"></div>
<div class="item green"></div>
<div class="item blue"></div>
<div class="item yellow"></div>
Потребовалось получить при клике второй class я это делал так

Код:
document.querySelectorAll(".item").forEach(function (el) {
  el.addEventListener("click", function (event) {
    document.body.style.event.target.className.slice(4);
  });
});
Этот код обозвали гов.... и хардкором

Как можно получить второй class но другим способом ?

Тут моя попытка : https://codepen.io/topicstarter/pen/vYXvPMg

maxim1978 17.01.2021 08:51
решено 

document.querySelectorAll(".item").forEach((el) => {
  el.addEventListener("click", (event) => {
    document.body.style.backgroundColor = getComputedStyle(
      event.target
    ).backgroundColor;
  });
});

рони 17.01.2021 09:01
maxim1978,
а так сможешь вместо forEach
document.body.addEventListener("click", function(event)  {

maxim1978 17.01.2021 09:04
Цитата:
Сообщение от рони (Сообщение 532850)
maxim1978,
а так сможешь вместо forEach
document.body.addEventListener("click", function(event)  {
как это ?

рони 17.01.2021 09:07
maxim1978,
Делегирование событий

maxim1978 17.01.2021 09:09
Цитата:
Сообщение от рони (Сообщение 532852)
у меня разве не это ?

рони 17.01.2021 09:12
maxim1978,
у вас на каждом item клик, а можно сделать обработчик клика только на body.

maxim1978 17.01.2021 09:12
Цитата:
Сообщение от рони (Сообщение 532854)
maxim1978,
у вас на каждом item клик, а можно сделать обработчик клика только на body.
я не понял как - покажите ?

рони 17.01.2021 09:24
maxim1978,
в доке всё написано, и у вас практически готовый код , только добавить 1 строку из примеров по ссылке. ... ну или ждите, может кто быстрее? :)

maxim1978 17.01.2021 09:25
Цитата:
Сообщение от рони (Сообщение 532856)
maxim1978,
в доке всё написано, и у вас практически готовый код , только добавить 1 строку из примеров по ссылке. ... ну или ждите, может кто быстрее? :)
я пол ночи просидел с этой штукой - ладно забейте

рони 17.01.2021 09:30
maxim1978,
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
.item {
    width: 40px;
    height: 40px;
}
.red {
    background: red;
}
.green {
    background: green;
}
.blue {
    background: blue;
}
.yellow {
    background: yellow;
}
    </style>
    <script>
document.addEventListener( "click" , function(event) {
let item = event.target.closest('.item');
if(!item) return;
document.body.style.backgroundColor = item.classList[1];
//document.body.style.backgroundColor = getComputedStyle(item).backgroundColor;
});
    </script>
</head>
<body>
<div class="item red"></div>
<div class="item green"></div>
<div class="item blue"></div>
<div class="item yellow"></div>
</body>
</html>

voraa 17.01.2021 10:58
Цитата:
Сообщение от maxim1978
Потребовалось получить при клике второй class
Что такое второй класс? Имя класса?
Цитата:
Сообщение от maxim1978
решено
Вы получаете цвет фона.
Причем там буден не 'green' или 'red', а 'rgb(0,255,0)' или 'rgb(255,0,0)'


Часовой пояс GMT +3, время: 11:52.