Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите сократить код (https://javascript.ru/forum/misc/81653-pomogite-sokratit-kod.html)

Сергей Ракипов 05.01.2021 12:17
Помогите сократить код
 
Есть вот такой код

На этот элемент наводят мышь или отводят с него izmenenie_nastroek_blok_1
А на этом элементе происходят изменения zagolovok_tsvet_1


let izmenenie_nastroek_blok_1 = document.querySelector(".izmenenie_nastroek_blok_1");
let zagolovok_tsvet_1 = document.querySelector(".zagolovok_tsvet_1");

let zagolovok_tsvet_izmenenie_1 = () => {
    zagolovok_tsvet_1.style.color = "#0504aa";
    console.log("навелось");
}
izmenenie_nastroek_blok_1.addEventListener("mouseover", zagolovok_tsvet_izmenenie_1);

let zagolovok_tsvet_izmenenie_11 = () => {
    zagolovok_tsvet_1.style.color = "#000";
    console.log("увелось");
}
izmenenie_nastroek_blok_1.addEventListener("mouseout", zagolovok_tsvet_izmenenie_11);


Есть ощущение что есть можно сделать короче.

ksa 09.01.2021 13:31
Цитата:
Сообщение от Сергей Ракипов
Есть ощущение что есть можно сделать короче.
Сделай покороче имена переменным... :D
Напиши одну функцию с параметром...
Подвешивай ее на события с разными параметрами...

рони 09.01.2021 13:47
Сергей Ракипов,
может css :hover?

Сергей Ракипов 18.01.2021 15:12
Цитата:
Сообщение от рони (Сообщение 532493)
Сергей Ракипов,
может css :hover?
Так вот я что то пробую но не срабатывает. 

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

        .kvadrat {
            width: 100px;
            height: 100px;
            border: 3px solid #000;
            cursor: pointer;
        }

        .kvadrat.aktiv {
            border: 3px solid #0504aa;
        }

        .kvadrat:focus {
            outline: none;
        }
        .kvadrat:hover .zagolovok{
            color:#0504aa
        }
    </style>
</head>

<body>
    <div class="blok">
        <h1 class="zagolovok">Заголовок</h1>
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>

</body>

</html>


Вроде все сделал правильно, но заголовок не меняет цвет при наведение на квадрат.

И у меня вот таких блоков будет штук 6

<div class="blok">
<h1>Заголовок</h1>
<button class="kvadrat"></button>
<button class="kvadrat"></button>
<button class="kvadrat"></button>
</div>

рони 18.01.2021 15:52
Сергей Ракипов,
с таким html сложно css применить, но делегирование снова рулит.
<!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;
       }
       .blok h1.hover{
           color:#0504aa;
       }

    </style>
</head>

<body>
    <div class="blok">
        <h1 class="zagolovok">Заголовок</h1>
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
    <div class="blok">
        <h1 class="zagolovok">Заголовок</h1>
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
    <div class="blok">
        <h1 class="zagolovok">Заголовок</h1>
        <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);


    let noverEvent = {
    handleEvent: event => {
        target = event.target.closest(".kvadrat");
        if(!target) return;
        let parent  = target.closest(".blok");
        let h = parent.querySelector("h1");
        h.classList.toggle("hover", event.type == "mouseenter")
    }
   }
   body.addEventListener("mouseenter", noverEvent, true);
   body.addEventListener("mouseleave", noverEvent, true);

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

voraa 18.01.2021 16:49
:D 
<!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: 600px;
            height: 100px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
			flex-direction: row-reverse;
        }
        .kvadrat{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
        .kvadrat.aktiv{
            border: 3px solid #0504aa;
        }
       .kvadrat:focus{
           outline: none;
       }
       .blok .kvadrat:hover~h1{
           color:#0504aa;
       }
    </style>
</head>
 
<body>
    <div class="blok">
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat aktiv"></button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
    <div class="blok">
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat aktiv"></button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
    <div class="blok">
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat aktiv"></button>
        <h1 class="zagolovok">Заголовок</h1>
    </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);
 
 
//    let noverEvent = {
//    handleEvent: event => {
 //       target = event.target.closest(".kvadrat");
//        if(!target) return;
//        let parent  = target.closest(".blok");
//        let h = parent.querySelector("h1");
//        h.classList.toggle("hover", event.type == "mouseenter")
//    }
//   }
//   body.addEventListener("mouseenter", noverEvent, true);
//   body.addEventListener("mouseleave", noverEvent, true);
 
</script>
</body>
</html>

Сергей Ракипов 19.01.2021 05:53
рони,
voraa,

Спасибо, два лучших пользователя на сайте.

Сергей Ракипов 19.01.2021 08:12
voraa,
А по другому ни как не записать, если к примеру h1 впереди, то есть он без ~

рони 19.01.2021 08:18
voraa,
а без flex-direction: row-reverse; сможешь? :) 

<!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: 600px;
            height: 100px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
            /*flex-direction: row-reverse;*/
        }
        .kvadrat{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
        .kvadrat.aktiv{
            border: 3px solid #0504aa;
        }
       .kvadrat:focus{
           outline: none;
       }
       .blok .kvadrat:hover~h1{
           color:#0504aa;
       }
    </style>
</head>

<body>
<div class="blok">
        <button class="kvadrat aktiv">1</button>
        <button class="kvadrat">2</button>
        <button class="kvadrat">3</button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
    <div class="blok">
        <button class="kvadrat aktiv">1</button>
        <button class="kvadrat">2</button>
        <button class="kvadrat">3</button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
    <div class="blok">
        <button class="kvadrat aktiv">1</button>
        <button class="kvadrat">2</button>
        <button class="kvadrat">3</button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
</body>
</html>

рони 19.01.2021 08:21
Цитата:
Сообщение от Сергей Ракипов
Нужна именно такая последовательность тэгов
потому что селекторы css обратно не видят, нужен квадрат а затем надпись, чтоб квадрат мог влиять на заголовок.

но заголовок можно визуально разместить впереди, один из таких способов показал voraa,


Часовой пояс GMT +3, время: 14:59.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице