Question

我有以下工作代码片段：
$(".container.menu > section > article").mCustomScrollbar("destroy");

现在我开始在jQuery中保存变量中的每个元素。所以我写的剪辑有点不同：

var containerMenu = $(".container.menu"),
    sectionMenu = containerMenu.children("section"),
    articleMenu = sectionMenu.children("article");

$(articleMenu).mCustomScrollbar("destroy");

但是当我像这样写它时，它将无法工作。

然后我再次尝试了不同的东西：

var articleMenu = $(".container.menu > section > article");

articleMenu.mCustomScrollbar("destroy");

但这也行不通最后，我试图用jQuery括号包围 articleMenu ：
$(articleMenu).mCu...

但这也行不通。

那为什么这不起作用？我不想总是编写整个jQuery选择器，只需调用变量。

编辑：

var container = $(".container"),
    section = container.children("section"),
    article = section.children("article"),

    menuTrigger = container.children(".menu-trigger"),

    containerMenu = $(".container.menu"),
    sectionMenu = containerMenu.children("section"),
    articleMenu = $(".container.menu > section > article");


function triggerMenu(){

   container.toggleClass("menu");

   if(container.hasClass("menu")){
      // won't work
      articleMenu.mCustomScrollbar("destroy");

      // will work
      $(".container.menu > section > article").mCustomScrollbar("destroy");
   }

}

此版本无效。当我替换articleMenu时，它可以工作。

EDIT2 ： HTML：

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>index</title>
        <link rel="shortcut icon" href="../favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" />
        <script src="js/modernizr.custom.js"></script>
    </head>
    <body>
        <div class="container">
            <a href="#" class="menu-trigger">menu</a>
            <section>
                <article class="about active">
                    <h1>about</h1>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</a></p>
                </article>
                <article class="design">
                    <h1>design</h1>
                    <p>this is an article</p>
                    <p>have fun with it</p>
                </article>
                <article class="photography">
                    <h1>photography</h1>
                    <p>this is an article</p>
                    <p>have fun with it</p>
                </article>
            </section>
        </div>

    <!-- Additional javascript plugins -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery.mCustomScrollbar.min.js"></script>
    <script src="js/script.js"></script>
    <script>
        (function($){
            $(window).load(function(){
                $("article").mCustomScrollbar({
                    contentTouchScroll: true,
                    mouseWheelPixels: 300,
                    autoHideScrollbar: true,
                    scrollButtons:{
                        enable: true,
                        scrollType: "continuous",
                        scrollSpeed: 300
                    },
                    advanced:{
                        autoScrollOnFocus: true
                    }
                });
            });
        })(jQuery);
    </script>
    </body>
</html>

的script.js

$(document).ready(function() {


    var container = $(".container"),
        section = container.children("section"),
        article = section.children("article"),

        menuTrigger = container.children(".menu-trigger"),

        containerMenu = $(".container.menu"),
        sectionMenu = containerMenu.children("section"),
        articleMenu = $(".container.menu > section > article");


    function triggerMenu(){

        container.toggleClass("menu");

        if(container.hasClass("menu")){
            // articleMenu.mCustomScrollbar("destroy");
            $(".container.menu > section > article").mCustomScrollbar("destroy");
        }

    }


    function init(){

        menuTrigger.on("click", triggerMenu);

    }


    init();

 })();

Answer 1

没有理由说这两者应该有所不同：

// 1
var articleMenu = $(".container.menu > section > article");
articleMenu.mCustomScrollbar("destroy");

// 2
$(".container.menu > section > article").mCustomScrollbar("destroy");

你说它们的事实让我期望你将你的jQuery选择器代码移动到另一个地方（这是有道理的）。但是，您似乎将它移动到代码中的某个位置，该元素在元素不存在时被调用。所以jQuery找不到元素，这个'结果'存储在你的变量中。在这种情况下，您选择元素的方式不是问题，而是您尝试选择元素的位置（或者更确切地说是何时）。

如果您无法自己弄清楚上述情况是否属实，请发布整段代码，以便我们了解会发生什么。

修改

确实这似乎是一个时间问题。您在代码运行时声明了articleMenu，但该元素可能尚不存在。如果您更改为以下内容，则应该有效：


function triggerMenu（）{

// Once we're inside the function, the element should exist var articleMenu = $(".container.menu > section > article"); container.toggleClass("menu"); if(container.hasClass("menu")){ // should work now articleMenu.mCustomScrollbar("destroy"); }

}

如果元素从头开始存在，则另一个解决方案可能是将代码包装在以下语句中：


$（document）.ready（function（）{

// Your code here will be executed when the page has finished loading

}）;

方法不适用于var - object

1 个答案: