Форум

Сергей Ракипов · #11 (**permalink**) 18.01.2021, 14:54

Я сейчас попробовал все решение и они не работают если
Вот таких блоков 2

<div class="blok">
<button class="kvadrat aktiv"></button>
<button class="kvadrat"></button>
<button class="kvadrat"></button>
</div>

А у меня таких блоков вообще шесть штук

Сергей Ракипов · #12 (**permalink**) 18.01.2021, 14:54

<div class="blok">
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
    <div class="blok">
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>

Вот если их два то все не работает.

рони · #13 (**permalink**) 18.01.2021, 15:21

Сергей Ракипов,
а подумать? если блоков много, может добавить цикл по блокам? или может клик поставить на родителя блоков?

рони · #14 (**permalink**) 18.01.2021, 15:34

Сергей Ракипов,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="index">
    <meta name="Keywords" content="index">
    <style>
        .blok{
            width: 400px;
            height: 100px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
        }
        .kvadrat{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
        .kvadrat.aktiv{
            border: 3px solid #0504aa;
        }
       .kvadrat:focus{
           outline: none;
       }

    </style>
</head>

<body>
    <div class="blok">
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
    <div class="blok">
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
    <div class="blok">
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
<script>
    let body = document.body;

    let aktiv = ({target}) => {
        target = target.closest(".kvadrat");
        if(!target) return;
        let parent  = target.closest(".blok");
        let current = parent.querySelector(".kvadrat.aktiv");
        current && current.classList.remove("aktiv");
        target.classList.add("aktiv");
    }
    body.addEventListener("click", aktiv);

</script>
</body>
</html>

Сергей Ракипов · #15 (**permalink**) 19.01.2021, 05:52

рони,
Делегирование как то мне не далось в начале для понимание, сейчас его всяческий избегаю.
Нужно снова уделить этому время.
Спасибо.

Форум

Справочник

Discord чат

Курсы javascript