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

Я следующий рабочий код надрез:
$(".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, просто вызовите переменную.

Edit:

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(); 

})();

источник

2014-01-20 Anonymous

Сразу после определения ваших переменных console.log каждого из них. –

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

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

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

Тот факт, что вы говорите, что они есть, заставляет меня ожидать, что вы переехали лет ur jQuery селекторный код в другое место (что имеет смысл). Однако, похоже, вы переместили его на место в своем коде, который вызывается, когда элемент не существует. Поэтому jQuery не может найти элемент, и этот «результат» сохраняется в вашей переменной. В этом случае способ, которым вы выбираете элемент, не проблема, он просто где (а точнее, когда) вы пытаетесь его выбрать.

Если вы не можете понять, верно ли это выше, отправьте весь фрагмент кода, чтобы мы могли видеть, что происходит.

Edit:

Действительно, кажется, что проблема времени. Вы объявляете articleMenu во время выполнения кода, но элемент, вероятно, еще не существует.Если изменить к следующему, он должен работать:

функция 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 
});

источник

2014-01-20 15:21:05

Эй, Ханс. Извините за мой поздний ответ. Был занят на этой неделе. Пожалуйста, взгляните на мое Редактирование, я разместил весь код. –

Я отредактировал свой ответ с тем, что, я считаю, является решением –

Благодарим вас за редактирование. Но это странно. Я попробовал оба решения, но оба они не сработают! Я действительно не понимаю, что происходит ... –

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

ответ

Смежные вопросы