jQuery Code仅在粘贴到控制台时才起作用

问题描述 投票：0回答：2

我已经为移动字体标记开关编写了这个函数，它在控制台中工作，但是当我在文档就绪函数上运行它或在控制台中调用函数时却没有。

我必须在控制台中粘贴代码。

没有错误消息..奇怪的事情。

任何解决方案或提示可能？

我无法发送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)


        }
    }
javascript jquery
2个回答
0
投票

如果您将此脚本放在头部，则可能需要将其移动到整个主体之后。不工作：

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

作品：

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

看起来你的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)


    }
}
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.