Переключить класс Добавить класс Конфликт + Показать модальное

Question

Я пытаюсь разработать учебник, который я нашел в Co-drop для меню ( http://tympanus.net/codrops/2012/09/25/3d-restaurant-menu-concept/comment-page-1/). Что мне действительно нравится в этом меню, так это то, что когда вы нажимаете на элемент, появляется модальное с подробной информацией о еде.

В моей версии у меня есть разные разделы меню в разных div, все с одним и тем же классом. (см. HTML ниже)

<div id="rm-container1" class="rm-container">
    <div class="rm-wrapper">
        <div class="rm-left">
        <div class="rm-inner">
        <div class="rm-content">
            <dl>
            <dt><a href="#" class="rm-viewdetails" data-thumb="images/2.jpg">26. Phở Tái, Nạm, Gầu, Sách - $6.50</a></dt>
            <dd>Rice noodle soup with eye round steak, well done flank, fat brisket & tripe</dd>
            </dl>
        </div><!-- /rm-content-->
        <div class="rm-overlay"></div>
        </div><!-- /rm-inner-->
        </div><!-- /rm-right-->
        </div><!-- /rm-wrapper-->   
</div><!-- /rm-container-->

<div id="rm-container2" class="rm-container">
    ...
</div>

см. Javascript ниже

var Menu = (function() {

    var $container = $( '#rm-container1' ),                     
        $left = $container.find( 'div.rm-cover' ),
        $middle = $container.find( 'div.rm-middle' ),
        $right = $container.find( 'div.rm-right' ),
        $open = $left.find('a.rm-button-open'),
        $close = $right.find('span.rm-close'),
        $details = $container.find( 'a.rm-viewdetails' ),

        init = function() {

            initEvents();

        },
        initEvents = function() {

            $open.on( 'click', function( event ) {

                openMenu();
                return false;

            } );

            $close.on( 'click', function( event ) {

                closeMenu();
                return false;

            } );

            $details.on( 'click', function( event ) {

                $container.removeClass( 'rm-in' ).children( 'div.rm-modal' ).remove();
                viewDetails( $( this ) );
                return false;

            } );

        },
        openMenu = function() {

            $container.addClass( 'rm-open' );

        },
        closeMenu = function() {

            $container.removeClass( 'rm-open rm-nodelay rm-in' );

        },
        viewDetails = function( recipe ) {

            var title = recipe.text(),
                img = recipe.data( 'thumb' ),
                description = recipe.parent().next().text(),
                url = recipe.attr( 'href' );

            var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );

            $modal.appendTo( $container );

            var h = $modal.outerHeight( true );
            $modal.css( 'margin-top', -h / 2 );

            setTimeout( function() {

                $container.addClass( 'rm-in rm-nodelay' );

                $modal.find( 'span.rm-close-modal' ).on( 'click', function() {

                    $container.removeClass( 'rm-in' );

                } );

            }, 0 );

        };

    return { init : init };

})();

Я только хочу, чтобы модал появлялся на элементе div, над которым находится моя мышь, поэтому я попытался добавить hover + toggleClass в initEvents и установить var $container = $('. Xyz'), но это привело к тому, что модал вообще не работал, Я считаю, что мне нужно исправить 3-ю строку в javascript (var $container = $('#xyz'),), чтобы сделать xyz для любого div, над которым я нахожусь (т. Е. Rm-container1, rm-container2). Как я могу это сделать?

Я попробовал множество решений из смежных тем на этом сайте без особой удачи. У кого-нибудь есть идеи, как решить эту проблему? Или есть лучший способ достичь моих целей? Любые мысли / помощь с благодарностью:-)

Answer 1

Расположите код, как показано ниже, и позвоните Menu.init(); незамедлительно после.

jQuery(function ($) {
    var Menu = (function(){
        ...
        init: function(){}
        return {
            init: init
        };
    })();
    Menu.init();
});

Проверьте JSFIDDLE

ОБНОВИТЬ

В вашем viewDetails Изменение функции

$modal.appendTo($container); а также

$container.addClass('rm-in rm-nodelay');

в

$modal.appendTo(recipe.parents('.rm-container')); а также

recipe.parents('.rm-container').addClass('rm-in rm-nodelay');

соответственно.

Проблема в том, что есть 2 $containers. Таким образом, вы должны нацелить контейнер, определенный для вашего рецепта, следовательно, recipe.parents('.rm-container'),

NB

Кодекс довольно запутанный и может сделать рефакторинг.

Обновление скрипки