jQuery代码仅在粘贴到控制台时才有效

时间：2019-03-14 10:28:42

标签： javascript jquery

我已经为移动字体标记开关编写了此功能，该功能可在控制台中使用，但是当我通过文档就绪功能运行它或在控制台中调用该功能时，却没有。

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

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

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

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


        }
    }

2 个答案:

答案 0 :(得分：0)

如果您将此脚本放在头部，则可能需要将其移到整个正文之后。 不起作用：

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

作品：

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

答案 1 :(得分：0)

在DOM准备就绪之前，您的JavaScript似乎正在执行。这意味着您的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)


    }
}
});
相关问题
最新问题