Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Дополнить код (https://javascript.ru/forum/jquery/83339-dopolnit-kod.html)

Сергей Ракипов 19.11.2021 07:46

Дополнить код
 
<!DOCTYPE html>
<html lang="ru_RU">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .box {
            cursor: pointer;
            font-size: 24px;
            display: block;
        }

        .box2 {
            color: blue;
            font-size: 24px;
            display: block;
        }
    </style>
    <script>
        jQuery( document ).ready( function ( $ ) {
            $( '.box' ).hover( function () {
                // навели мышь на элемент
                $( '.box2' ).css( 'color', 'red' );
            }, function () {
                // убрали мышь с элемента
                $( '.box2' ).css( 'color', '' );
            } );
        } );
    </script>
</head>
<body>
    <div>
        <p class="box">Какой то текст</p>
    </div>
    <div>
        <p class="box2">Элемент</p>
    </div>
</body>
</html>


Дополнить код, что бы когда разрешение экрана было меньше 640px
то при наведении .box то .box2 менял цвет orange а когда убрали курсор с .box при разрешение меньше 640 то .box2 менял на цвет blue

ksa 19.11.2021 08:38

Цитата:

Сообщение от Сергей Ракипов
когда разрешение экрана было меньше 640px

Вот тебе статейка...
https://habr.com/ru/post/509258/

Сергей Ракипов 19.11.2021 08:53

ksa,
Я могу сделать на обычном js но я не знаю правил написание синтаксиса на jQ

ksa 19.11.2021 08:58

Цитата:

Сообщение от Сергей Ракипов
я не знаю правил написание синтаксиса на jQ

Оно аналогичное...
https://jquery-docs.ru/click/

ksa 19.11.2021 09:00

Сергей Ракипов, вот русский вариант...
https://basicweb.ru/jquery/jquery_event_click.php

Сергей Ракипов 19.11.2021 09:02

ksa,
Так у меня это написано в коде, мне в этом коде не хватает условий max-width

ksa 19.11.2021 09:25

Цитата:

Сообщение от Сергей Ракипов
мне в этом коде не хватает условий max-width

Т.е. ты не умеешь применять "условное ветвление"? :blink:
https://learn.javascript.ru/ifelse

ksa 19.11.2021 09:29

Что-то про click я явно не в ту тему написал... :D
Там у камрада кликать на капчу не получалось.

Сергей Ракипов, вот тебе вариант про разрешение на jQ...
http://bologer.ru/poluchit-vysotu-i-...rana-s-jquery/

Правда я не пойму зачем именно на jQ это все определять. Тебя кто-то так заставляет? :-?

рони 19.11.2021 09:50

Сергей Ракипов,
// навели мышь на элемент
                $( '.box2' ).css( 'color', window.matchMedia('(min-width: 640px)').matches  ? 'red' : 'orange');

Сергей Ракипов 19.11.2021 10:05

Цитата:

Сообщение от ksa (Сообщение 541585)
Что-то про click я явно не в ту тему написал... :D
Тебя кто-то так заставляет? :-?

говорят если научится пользоваться этим библиотеками будет проще

Сергей Ракипов 19.11.2021 10:15

Цитата:

Сообщение от рони (Сообщение 541586)
Сергей Ракипов,
// навели мышь на элемент
                $( '.box2' ).css( 'color', window.matchMedia('(min-width: 640px)').matches  ? 'red' : 'orange');

Что то не работает как нужно но синтаксис не много понял.

Вот изначально элемент черного цвета, на него навели он стал красным, убрали он снова черный.
Если разрешение поменялось то при наведении один цвет а когда убрали другой цвет.

Сергей Ракипов 19.11.2021 10:37

Я пробую меня все местами и не понимаю синтаксиса, как он работает?

рони 19.11.2021 11:04

Цитата:

Сообщение от Сергей Ракипов
Если разрешение поменялось то при наведении один цвет а когда убрали другой цвет.

не осилил)))
Цитата:

Сообщение от Сергей Ракипов
как он работает?

так же как if Условный оператор „?“

Сергей Ракипов 19.11.2021 11:07

а : что такое?

И почему window.matchMedia('(min-width: 640px)') стоит как то не понятно, ведь это же условия которое нужно проверить

рони 19.11.2021 11:07

Сергей Ракипов,
проба угадать, что вам нужно ... )))
<!DOCTYPE html>
<html lang="ru_RU">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .box {
            cursor: pointer;
            font-size: 24px;
            display: block;
        }

        .box2 {
            color: blue;
            font-size: 24px;
            display: block;
        }
    </style>
    <script>
        jQuery( document ).ready( function ( $ ) {
            $( '.box' ).hover( function () {
                // навели мышь на элемент
                $( '.box2' ).css( 'color', window.matchMedia('(min-width: 640px)').matches  ? 'red' : 'orange');
            }, function () {
                // убрали мышь с элемента
                $( '.box2' ).css( 'color', window.matchMedia('(min-width: 640px)').matches  ? '' : 'Lime' );
            } );
        } );
    </script>
</head>
<body>
    <div>
        <p class="box">Какой то текст</p>
    </div>
    <div>
        <p class="box2">Элемент</p>
    </div>
</body>
</html>

рони 19.11.2021 11:09

Цитата:

Сообщение от Сергей Ракипов
а : что такое?

else
читайте документацию, ссылка дана выше.

Сергей Ракипов 19.11.2021 11:13

Цитата:

Сообщение от рони (Сообщение 541593)
Сергей Ракипов,
проба угадать, что вам нужно ... )))

да идеально!!! Скажите вы проходили курсы телепатии или это врожденное? ))

рони 19.11.2021 11:33

Сергей Ракипов,
тут есть более профи по части телепатии и js)))

Сергей Ракипов 19.11.2021 12:00

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

<!DOCTYPE html>
<html lang="ru_RU">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body{
            background: #000;
            font-family: Verdana;
            font-size: 16px;
        }
        .blok {
            margin: 40px 40px 40px 40px;
            display: flex;
            align-items: center;
        }
        .tekst {
            margin: 0px 20px 0px 0px;
        }
        .tekst a {
            color:#22AD1D;
        }
        .tekst a:hover {
            color:#fff;
        }
        .ikonka {
            width: 94px;
            height: 94px;
        }
        .ikonka_pryas {
            background-image: url(http://rakipov.ru/files/ikonka_prais_6.svg);
            background-repeat:  no-repeat; 
            background-position:center;
            background-size: 100%;
        }
        @media (max-width:640px){
            .ikonka {
                width: 64px;
                height: 64px;
        }
        .ikonka_pryas {
            background-image: url(http://rakipov.ru/files/ikonka_prais_9.svg);
            background-repeat:  no-repeat; 
            background-position:center;
            background-size: 100%;
        }
        }
    </style>
    <script>
        jQuery( document ).ready( function ( $ ) {
            $( '.ssilka_prays' ).hover( function () {
                // навели мышь на элемент
                $( '.ikonka_pryas' ).css( 'background-image',
                    'url(http://rakipov.ru/files/ikonka_prais_8.svg)' );
            }, function () {
                // убрали мышь с элемента
                $( '.ikonka_pryas' ).css( 'background-image',
                    'url(http://rakipov.ru/files/ikonka_prais_6.svg)' );
            } );
        } );
    </script>
</head>
<body>
    <div class="blok">
        <div class="tekst">
            <a href="#" class="ssilka_prays">ПРАЙС ЛИСТ</a>
        </div>
        <div class="ikonka ikonka_pryas">
            
        </div>
    </div>
</body>
</html>



Вот как должно работать.

Если разрешение экрана больше 640 пикселей то должна быть показана вот эта картинка ikonka_prais_6.svg если при этом разрешении навели на .ssilka_prays то картинка должна поменяться на ikonka_prais_8.svg если убрали то вернуть картинку назад.

Если разрешение экрана меньше 640 пикселей то должна быть показана вот эта картинка ikonka_prais_9.svg если при этом разрешении навели на .ssilka_prays то картинка должна поменяться на ikonka_prais_10.svg если убрали то вернуть картинку назад.

Сергей Ракипов 19.11.2021 15:47

Подумал может не очень понятно. Вот я сделал на простом JS
Вот так должно работать только на JQ

<!DOCTYPE html>
<html lang="ru_RU">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body{
            background: #000;
            font-family: Verdana;
            font-size: 16px;
        }
        .blok {
            margin: 40px 40px 40px 40px;
            display: flex;
            align-items: center;
        }
        .tekst {
            margin: 0px 20px 0px 0px;
        }
        .tekst a {
            color:#22AD1D;
        }
        .tekst a:hover {
            color:#fff;
        }
        .ikonka {
            width: 94px;
            height: 94px;
        }
        .ikonka_pryas {
            background-image: url(http://rakipov.ru/files/ikonka_prais_6.svg);
            background-repeat:  no-repeat; 
            background-position:center;
            background-size: 100%;
        }
        @media (max-width:640px){
            .ikonka {
                width: 64px;
                height: 64px;
        }
        .ikonka_pryas {
            background-image: url(http://rakipov.ru/files/ikonka_prais_9.svg);
            background-repeat:  no-repeat; 
            background-position:center;
            background-size: 100%;
        }
        }
    </style>

</head>
<body>
    <div class="blok">
        <div class="tekst">
            <a href="#" class="ssilka_prays">ПРАЙС ЛИСТ</a>
        </div>
        <div class="ikonka ikonka_pryas">
            
        </div>
    </div>
    <script>
        let ssilka_prays = document.querySelector( ".ssilka_prays" );
        let ikonka_pryas = document.querySelector( ".ikonka_pryas" );

        let ssilka = () => {
            const windowInnerWidth = document.documentElement.clientWidth
            if ( windowInnerWidth >= 640 ) {
                ikonka_pryas.style.backgroundImage = "url('http://rakipov.ru/files/ikonka_prais_6.svg')";
                let ssilka_2 = () => {
                    ikonka_pryas.style.backgroundImage = "url('http://rakipov.ru/files/ikonka_prais_8.svg')";
                };
                ssilka_prays.addEventListener( "mouseover", ssilka_2 );

                let ssilka_3 = () => {
                    ikonka_pryas.style.backgroundImage = "url('http://rakipov.ru/files/ikonka_prais_6.svg')";
                };
                ssilka_prays.addEventListener( "mouseout", ssilka_3 );
            } else if ( windowInnerWidth <= 640 ) {
                ikonka_pryas.style.backgroundImage = "url('http://rakipov.ru/files/ikonka_prais_9.svg')";
                let ssilka_2 = () => {
                    ikonka_pryas.style.backgroundImage = "url('http://rakipov.ru/files/ikonka_prais_10.svg')";
                };
                ssilka_prays.addEventListener( "mouseover", ssilka_2 );

                let ssilka_3 = () => {
                    ikonka_pryas.style.backgroundImage = "url('http://rakipov.ru/files/ikonka_prais_9.svg')";
                };
                ssilka_prays.addEventListener( "mouseout", ssilka_3 );
            }
            console.log( windowInnerWidth );
        };
        window.addEventListener( "resize", ssilka );
        ssilka();
    </script>
</body>
</html>


И у меня дополнительный вопрос а почему иногда иконка мигает, то есть навожусь и моргнуло а потом все норм работает, и так иногда происходит.

рони 19.11.2021 16:08

Сергей Ракипов,
<!DOCTYPE html>
<html lang="ru_RU">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body {
            background: #000;
            font-family: Verdana;
            font-size: 16px;
        }

        .blok {
            margin: 40px 40px 40px 40px;
            display: flex;
            align-items: center;
        }

        .tekst {
            margin: 0px 20px 0px 0px;
        }

        .tekst a {
            color: #22AD1D;
        }

        .tekst a:hover {
            color: #fff;
        }

        .ikonka {
            width: 94px;
            height: 94px;
        }

        .ikonka_pryas {
            background-image: url(http://rakipov.ru/files/ikonka_prais_6.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
        }

        @media (max-width:640px) {
            .ikonka {
                width: 64px;
                height: 64px;
            }
            .ikonka_pryas {
                background-image: url(http://rakipov.ru/files/ikonka_prais_9.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100%;
            }
        }
    </style>
    <script>
        jQuery(document).ready(function($) {
            [8, 10].forEach(n => {
                let img = new Image();
                img.src = `http://rakipov.ru/files/ikonka_prais_${n}.svg`;
            }); //предзагрузка картинок для  hover, чтоб иконка не "прыгала", по желанию
            $('.ssilka_prays').hover(function() {
                // навели мышь на элемент
                let n = window.matchMedia('(min-width: 640px)').matches ? 8 : 10;
                let url = `url(http://rakipov.ru/files/ikonka_prais_${n}.svg)`;
                $('.ikonka_pryas').css('background-image', url);
            }, function() {
                // убрали мышь с элемента
                $('.ikonka_pryas').css('background-image', '');
            });
        });
    </script>
</head>

<body>
    <div class="blok">
        <div class="tekst">
            <a href="#" class="ssilka_prays">ПРАЙС ЛИСТ</a>
        </div>
        <div class="ikonka ikonka_pryas">
        </div>
    </div>
</body>

</html>

voraa 19.11.2021 16:08

Кошмарный код.
Вот вы повесили на ssilka_prays события mouseover и mouseout.
Затем, если изменится размер опять вызовется ваша функция ssilka и на этот элемент опять будут вешаться те же события но с другими функциями. С другими, даже если будет выполняться то же условие, ведь эти функции заново определяются, и это будут уже совсем другие функции.
Но addEventListener не отменяет предыдущие обработчики, а добавляет.
Т.е в конце концов может случиться так, что у вас будет определено 100500 одинаковых функций и все они будут назначены, как обработчики событий, и будут выполняться последовательно при наступлении события.

Это я писал про код Сергей Ракипов

рони 19.11.2021 16:11

Цитата:

Сообщение от Сергей Ракипов
И у меня дополнительный вопрос а почему иногда иконка мигает,

попробовал добавить предзагрузку картинок, может частично пропадёт мигание, если нет то к специалистам по css.

ksa 19.11.2021 16:39

Чтобы иконки не "мигали" можно использовать подход со "спрайтами"...
https://learn.javascript.ru/css-sprite

Сергей Ракипов 20.11.2021 07:05

рони,
Как всегда огромное спасибо !

Сергей Ракипов 20.11.2021 07:05

voraa,
А как правильно нужно было сделать ?

Сергей Ракипов 20.11.2021 07:06

ksa,
Спасибо вот это полезно

Сергей Ракипов 20.11.2021 07:09

рони,
А вот еще такой вопрос. Это лучше сделать в модельный файл и подгружать его или вот так куском кода на каждую страницу

??

рони 20.11.2021 07:34

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

Сергей Ракипов 20.11.2021 08:14

Попробовал со спрайтами и понял что это нужная тема которую стоит использовать. И моего понимание хватило не на много. Можете дополнить код что бы он работал так как же как и код выше, только со сдвигом, я не много его написал. Но ни понимаю синтаксиса когда нужно добавлять условия на разрешение 640 px

<!DOCTYPE html>
<html lang="ru_RU">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body{
            background: #000;
            font-family: Verdana;
            font-size: 16px;
        }
        .blok {
            margin: 40px 40px 40px 40px;
            display: flex;
            align-items: center;
        }
        .tekst {
            margin: 0px 20px 0px 0px;
        }
        .tekst a {
            color:#22AD1D;
        }
        .tekst a:hover {
            color:#fff;
        }
        .ikonka {
            width: 94px;
            height: 94px;
        }
        .ikonka_pryas {
            background-image: url(http://rakipov.ru/files/prays_94.png);
            background-repeat:  no-repeat; 
            background-position:0px ;
        }
        .ikonka_pryas:hover {
            background-image: url(http://rakipov.ru/files/prays_94.png);
            background-repeat:  no-repeat; 
            background-position:-94px;
        }
        @media (max-width:640px){
            .ikonka {
                width: 64px;
                height: 64px;
        }
        .ikonka_pryas {
            background-image: url(http://rakipov.ru/files/prays_64.png);
            background-repeat:  no-repeat; 
            background-position:0px;
        }
        .ikonka_pryas:hover {
            background-image: url(http://rakipov.ru/files/prays_64.png);
            background-repeat:  no-repeat; 
            background-position:-64px;
        }
        }
    </style>

</head>
<body>
    <div class="blok">
        <div class="tekst">
            <a href="#" class="ssilka_prays">ПРАЙС ЛИСТ</a>
        </div>
        <div class="ikonka ikonka_pryas">
            
        </div>
    </div>
    <script>
        jQuery(document).ready(function($) {
            $('.ssilka_prays').hover(function() {
                // навели мышь на элемент
                $('.ikonka_pryas').css('background-position', '-94px');
            }, function() {
                // убрали мышь с элемента
                $('.ikonka_pryas').css('background-position', '0px');
            });
        });
    </script>
</body>
</html>

рони 20.11.2021 09:46

Сергей Ракипов,
<!DOCTYPE html>
<html lang="ru_RU">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body{
            background: #000;
            font-family: Verdana;
            font-size: 16px;
        }
        .blok {
            margin: 40px 40px 40px 40px;
            display: flex;
            align-items: center;
        }
        .tekst {
            margin: 0px 20px 0px 0px;
        }
        .tekst a {
            color:#22AD1D;
        }
        .tekst a:hover {
            color:#fff;
        }
        .ikonka {
            width: 94px;
            height: 94px;
        }
        .ikonka_pryas {
            background-image: url(http://rakipov.ru/files/prays_94.png);
            background-repeat:  no-repeat;
            background-position:0px ;
        }
        .ikonka_pryas:hover {
            background-image: url(http://rakipov.ru/files/prays_94.png);
            background-repeat:  no-repeat;
            background-position:-94px;
        }
        @media (max-width:640px){
            .ikonka {
                width: 64px;
                height: 64px;
        }
        .ikonka_pryas {
            background-image: url(http://rakipov.ru/files/prays_64.png);
            background-repeat:  no-repeat;
            background-position:0px;
        }
        .ikonka_pryas:hover {
            background-image: url(http://rakipov.ru/files/prays_64.png);
            background-repeat:  no-repeat;
            background-position:-64px;

        }
        }
    </style>

</head>
<body>
    <div class="blok">
        <div class="tekst">
            <a href="#" class="ssilka_prays">ПРАЙС ЛИСТ</a>
        </div>
        <div class="ikonka ikonka_pryas">

        </div>
    </div>
    <script>
        jQuery(document).ready(function($) {
            $('.ssilka_prays').on('mouseenter mouseleave', function(event) {
            let backgroundPositionX = event.type === 'mouseleave' ? '' : window.matchMedia('(min-width: 640px)').matches ? '-94px' : '-64px';
            $('.ikonka_pryas').css({backgroundPositionX});
        })
        });
    </script>
</body>
</html>

Сергей Ракипов 20.11.2021 09:53

рони,
Все идеально спасибо!


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