Блог

Главная - Вопросы по программированию - Код jQuery работает только при вставке в консоль

Код jQuery работает только при вставке в консоль

#javascript #jquery

#javascript #jquery

Вопрос:

Я написал эту функцию для мобильного переключателя разметки шрифтов, она работает в консоли, но не тогда, когда я запускаю ее через функцию document ready или вызываю функцию в консоли.

я должен вставить код в консоль.

сообщений об ошибках нет.. странная вещь.

возможно, какие-либо решения или советы?

Я не могу отправить HTML-код, потому что это проект для клиента.

пожалуйста, поймите это.

 var d = window.matchMedia("(max-width: 1024px)");
    menu_to_mobile(d)
    d.addListener(menu_to_mobile)

    function menu_to_mobile() {
        if(d.matches) {
          var menu_points = $('li.dynamic-font-menu');
          var bullet_points = $('div.dynamic-bullet-points');

            $('div.navigation-overlay').remove();
            $('div.mobile-button').load('menu-trigger-mobile.html');
            loadmobile_menu();

            setTimeout(()=>{
              if ($('anchor-point-1').hasClass('mobile-anchor-point-1')) {
                $('anchor-point-2').removeClass('mobile-anchor-point-2');
                $('anchor-point-3').removeClass('mobile-anchor-point-3');
                $('anchor-point-4').removeClass('mobile-anchor-point-4');
                $(menu_points[0]).css('font-family', 'TTFirsNeue-Bold');
                $(menu_points[1]).css('font-family', 'TTFirsNeue-LightItalic');
                $(menu_points[2]).css('font-family', 'TTFirsNeue-LightItalic');
                $(menu_points[3]).css('font-family', 'TTFirsNeue-LightItalic');

                $(bullet_points[0]).addClass('dynamic-bullet-points-active');
                $(bullet_points[1]).removeClass('dynamic-bullet-points-active');
                $(bullet_points[2]).removeClass('dynamic-bullet-points-active');
                $(bullet_points[3]).removeClass('dynamic-bullet-points-active');
            }

            if ($('anchor-point-2').hasClass('mobile-anchor-point-2')) {
                $('anchor-point-1').removeClass('mobile-anchor-point-1');
                $('anchor-point-3').removeClass('mobile-anchor-point-3');
                $('anchor-point-4').removeClass('mobile-anchor-point-4');

                $(menu_points[0]).css('font-family', 'TTFirsNeue-LightItalic');
                $(menu_points[1]).css('font-family', 'TTFirsNeue-Bold');
                $(menu_points[2]).css('font-family', 'TTFirsNeue-LightItalic');
                $(menu_points[3]).css('font-family', 'TTFirsNeue-LightItalic');

                $(bullet_points[1]).addClass('dynamic-bullet-points-active');
                $(bullet_points[0]).removeClass('dynamic-bullet-points-active');
                $(bullet_points[2]).removeClass('dynamic-bullet-points-active');
                $(bullet_points[3]).removeClass('dynamic-bullet-points-active');
            }

            if ($('anchor-point-3').hasClass('mobile-anchor-point-3')) {
                $('anchor-point-1').removeClass('mobile-anchor-point-1');
                $('anchor-point-2').removeClass('mobile-anchor-point-2');
                $('anchor-point-4').removeClass('mobile-anchor-point-4');

                $(menu_points[0]).css('font-family', 'TTFirsNeue-LightItalic');
                $(menu_points[1]).css('font-family', 'TTFirsNeue-LightItalic');
                $(menu_points[2]).css('font-family', 'TTFirsNeue-Bold');
                $(menu_points[3]).css('font-family', 'TTFirsNeue-LightItalic');

                $(bullet_points[2]).addClass('dynamic-bullet-points-active');
                $(bullet_points[0]).removeClass('dynamic-bullet-points-active');
                $(bullet_points[1]).removeClass('dynamic-bullet-points-active');
                $(bullet_points[3]).removeClass('dynamic-bullet-points-active');

            }

            if ($('anchor-point-4').hasClass('mobile-anchor-point-4')) {

                $('anchor-point-1').removeClass('mobile-anchor-point-1');
                $('anchor-point-2').removeClass('mobile-anchor-point-2');
                $('anchor-point-3').removeClass('mobile-anchor-point-3');

                $(menu_points[1]).css('font-family', 'TTFirsNeue-LightItalic');
                $(menu_points[3]).css('font-family', 'TTFirsNeue-Bold');
                $(menu_points[2]).css('font-family', 'TTFirsNeue-LightItalic');
                $(menu_points[0]).css('font-family', 'TTFirsNeue-LightItalic');

                $(bullet_points[3]).addClass('dynamic-bullet-points-active');
                $(bullet_points[0]).removeClass('dynamic-bullet-points-active');
                $(bullet_points[1]).removeClass('dynamic-bullet-points-active');
                $(bullet_points[2]).removeClass('dynamic-bullet-points-active');
            }
        } , 500)


        }
    }

Комментарии:

1. Что следует учитывать: menu_to_mobile — это функция без аргументов, и вы отправляете ее «d» в menu_to_mobile(d). 2 — Используете ли вы внешний js-файл? Если вы не получаете ошибок в своей консоли при загрузке этого кода, возможно, это потому, что он никогда не загружался.

2. Код должен работать, потому что я добавил предупреждение (‘works’); и оно появляется, но инструкции if игнорируются.. это меня прямо сейчас напрягает

3. Выполнили ли вы ‘console.log(d.matches)’ перед первым if? Что он выводит? Или if внутри setTimeout не работает?

Ответ №1:

Если у вас есть этот скрипт в head, вы можете захотеть переместить его в after всего тела. Не работает:

 <head>
<script src="doDOM.js"></script>
</head>

Работает:

 <body>
<h1>HI!</h1>
<script src="doDOM.js"></script>
</body>

Ответ №2:

Похоже, что ваш javascript выполняется до того, как DOM будет готов. Это означает, что ваши html-элементы не готовы. Таким образом, jQuery не сможет найти html-элемент, и в конечном итоге он не будет работать. Он работает в консоли, потому что ваш DOM готов, а затем вы выполняете на нем JS-код. Ответ от @N8Javascript также решит вашу проблему.

 $( document ).ready(function() {   
var d = window.matchMedia("(max-width: 1024px)");
menu_to_mobile(d)
d.addListener(menu_to_mobile)

function menu_to_mobile() {
    if(d.matches) {
      var menu_points = $('li.dynamic-font-menu');
      var bullet_points = $('div.dynamic-bullet-points');

        $('div.navigation-overlay').remove();
        $('div.mobile-button').load('menu-trigger-mobile.html');
        loadmobile_menu();

        setTimeout(()=>{
          if ($('anchor-point-1').hasClass('mobile-anchor-point-1')) {
            $('anchor-point-2').removeClass('mobile-anchor-point-2');
            $('anchor-point-3').removeClass('mobile-anchor-point-3');
            $('anchor-point-4').removeClass('mobile-anchor-point-4');
            $(menu_points[0]).css('font-family', 'TTFirsNeue-Bold');
            $(menu_points[1]).css('font-family', 'TTFirsNeue-LightItalic');
            $(menu_points[2]).css('font-family', 'TTFirsNeue-LightItalic');
            $(menu_points[3]).css('font-family', 'TTFirsNeue-LightItalic');

            $(bullet_points[0]).addClass('dynamic-bullet-points-active');
            $(bullet_points[1]).removeClass('dynamic-bullet-points-active');
            $(bullet_points[2]).removeClass('dynamic-bullet-points-active');
            $(bullet_points[3]).removeClass('dynamic-bullet-points-active');
        }

        if ($('anchor-point-2').hasClass('mobile-anchor-point-2')) {
            $('anchor-point-1').removeClass('mobile-anchor-point-1');
            $('anchor-point-3').removeClass('mobile-anchor-point-3');
            $('anchor-point-4').removeClass('mobile-anchor-point-4');

            $(menu_points[0]).css('font-family', 'TTFirsNeue-LightItalic');
            $(menu_points[1]).css('font-family', 'TTFirsNeue-Bold');
            $(menu_points[2]).css('font-family', 'TTFirsNeue-LightItalic');
            $(menu_points[3]).css('font-family', 'TTFirsNeue-LightItalic');

            $(bullet_points[1]).addClass('dynamic-bullet-points-active');
            $(bullet_points[0]).removeClass('dynamic-bullet-points-active');
            $(bullet_points[2]).removeClass('dynamic-bullet-points-active');
            $(bullet_points[3]).removeClass('dynamic-bullet-points-active');
        }

        if ($('anchor-point-3').hasClass('mobile-anchor-point-3')) {
            $('anchor-point-1').removeClass('mobile-anchor-point-1');
            $('anchor-point-2').removeClass('mobile-anchor-point-2');
            $('anchor-point-4').removeClass('mobile-anchor-point-4');

            $(menu_points[0]).css('font-family', 'TTFirsNeue-LightItalic');
            $(menu_points[1]).css('font-family', 'TTFirsNeue-LightItalic');
            $(menu_points[2]).css('font-family', 'TTFirsNeue-Bold');
            $(menu_points[3]).css('font-family', 'TTFirsNeue-LightItalic');

            $(bullet_points[2]).addClass('dynamic-bullet-points-active');
            $(bullet_points[0]).removeClass('dynamic-bullet-points-active');
            $(bullet_points[1]).removeClass('dynamic-bullet-points-active');
            $(bullet_points[3]).removeClass('dynamic-bullet-points-active');

        }

        if ($('anchor-point-4').hasClass('mobile-anchor-point-4')) {

            $('anchor-point-1').removeClass('mobile-anchor-point-1');
            $('anchor-point-2').removeClass('mobile-anchor-point-2');
            $('anchor-point-3').removeClass('mobile-anchor-point-3');

            $(menu_points[1]).css('font-family', 'TTFirsNeue-LightItalic');
            $(menu_points[3]).css('font-family', 'TTFirsNeue-Bold');
            $(menu_points[2]).css('font-family', 'TTFirsNeue-LightItalic');
            $(menu_points[0]).css('font-family', 'TTFirsNeue-LightItalic');

            $(bullet_points[3]).addClass('dynamic-bullet-points-active');
            $(bullet_points[0]).removeClass('dynamic-bullet-points-active');
            $(bullet_points[1]).removeClass('dynamic-bullet-points-active');
            $(bullet_points[2]).removeClass('dynamic-bullet-points-active');
        }
    } , 500)


    }
}
});