Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 18.01.2021, 14:54
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Я сейчас попробовал все решение и они не работают если
Вот таких блоков 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
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сергей Ракипов,
а подумать? если блоков много, может добавить цикл по блокам? или может клик поставить на родителя блоков?
Ответить с цитированием
  #14 (permalink)  
Старый 18.01.2021, 15:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

делегирование
Сергей Ракипов,
<!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
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Валидация jquery c button type=button designerandrey jQuery 4 09.11.2018 15:21
Как сделать чтобы в текст button менялось значение в зависимости от количества выбран mopsusha Общие вопросы Javascript 10 19.03.2018 20:16
обработка щелчка по button. тонкие различия с input type=button xtfkpi Events/DOM/Window 2 28.01.2015 23:32
элемент внутри кнопки button FanAizu (X)HTML/CSS 2 15.07.2014 20:44
Проблема radio button с кроссбраузерностью shkarbatov Javascript под браузер 0 28.07.2011 10:55