Метод не будет работать с var-объектом

0

У меня следующий снимок кода WORKING:
$(".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");

Но и это не сработает.
Наконец, я попытался окружить articleMenu скобками jQuery:
$(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();

 })();
  • 0
    Сразу после определения ваших переменных, console.log каждой из них.
Теги:

1 ответ

0

Нет причин, по которым эти два должны быть разными:

// 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

});

Поделиться
  • 0
    Привет, Ганс. Извините за мой поздний ответ. Был занят на этой неделе. Пожалуйста, посмотрите на мой Edit, я разместил весь код.
  • 0
    Я отредактировал свой ответ, полагая, что это решение
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню