JQuery在WordPress中冲突,在HTML中工作正常

时间:2015-07-05 作者:Hardeep Asrani

我一直在做一个设计,它在HTML中工作得很好,但在WordPress中使用时,jQuery存在巨大的冲突。

这是整个剧本。js文件优先:

jQuery(document).ready(function($) {
    /* Parallax */
    $(\'.intro\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/intro.jpg\', bleed: \'10\'});
    $(\'.social\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/social.jpg\', bleed: \'10\'});
    $(\'.separator\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/separator.jpg\', bleed: \'10\'});
    $(\'.subscribe\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/subscribe.jpg\', bleed: \'10\'});
    $(\'.testimonials\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/testimonials.jpg\', bleed: \'10\'});
    $(\'.contact\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/contact.jpg\', bleed: \'10\'});
    $(\'.archive-header\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/blog.jpg\'});
    $(\'.post-header\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/blog.jpg\'});

    /* SMOOTH SCROLL */
    jQuery(\'a[href*=#]\').click(function() {
        if (location.pathname.replace(/^\\//,\'\') == this.pathname.replace(/^\\//,\'\') && location.hostname == this.hostname) {
            var target = jQuery(this.hash);
            target = target.length ? target : jQuery(\'[name=\' + this.hash.slice(1) +\']\');
            if (target.length) {
                jQuery(\'html,body\').animate({
                    scrollTop: target.offset().top
                }, 1200);
                return false;
            }
        }
    });

    /* Apply matchHeight to match services grid */
    var byRow = $(\'body\').hasClass(\'pmenu-push\');
    $(\'.col-md-12\').each(function() {
        $(this).children(\'.service-box\').matchHeight(byRow);
    });
    $(\'.col-md-12\').each(function() {
        $(this).children(\'.blog-item\').matchHeight(byRow);
    });

    /* Skillbar animation speed */
    jQuery(\'.skillbar\').each(function(){
        jQuery(this).find(\'.skillbar-bar\').animate({
            width:jQuery(this).attr(\'data-percent\')
        },6000);
    });

    /* Enable Portfolio Grid */
    Grid.init();

    /* Enable Swiper for Testimonials */
    var mySwiper = new Swiper (\'.swiper-container\', {
        loop: true,
        autoplay:10000
    })

    /* Enable Slideout Menu */
    var menuLeft = document.getElementById( \'pmenu\' ),
    showLeftPush = document.getElementById( \'showLeftPush\' ),
    hideLeftPush = document.getElementById( \'hideLeftPush\' ),
    body = document.body;

    showLeftPush.onclick = function() {
        classie.toggle( this, \'active\' );
        classie.toggle( body, \'pmenu-push-toright\' );
        if (classie.has(showLeftPush,"fa-bars")) {
            classie.remove(showLeftPush,"fa-bars");
            classie.add(showLeftPush,"fa-times");
        } else {
            classie.add(showLeftPush,"fa-bars");
        }
        classie.toggle( menuLeft, \'pmenu-open\' );
        disableOther( \'showLeftPush\' );
    };
    hideLeftPush.onclick = function() {
        classie.toggle( this, \'active\' );
        classie.toggle( body, \'pmenu-push-toright\' );
        classie.toggle( menuLeft, \'pmenu-open\' );
        disableOther( \'hideLeftPush\' );
        classie.add(showLeftPush,"fa-bars");
    };

    function disableOther( button ) {
        if( button !== \'showLeftPush\' ) {
            classie.toggle( showLeftPush, \'disabled\' );
        }
    }
});
如果我从文件中删除下面的代码,这将使公文包工作正常:

/* Enable Portfolio Grid */
Grid.init();
以及如何避免这种情况的建议:)

谢谢你的帮助!

1 个回复
最合适的回答,由SO网友:Hardeep Asrani 整理而成

注意:这是我5年前的解决方案:

我能够解决它。调试表明网格未声明,因此我添加了网格。初始化();其投资组合。js文件本身,在那之后它就工作了。非常感谢。:–Hardeep Asrani 2015年7月8日3:13

结束

相关推荐

无法使用jQuery从带有GET_BODY_CLASS()的JSON字符串添加类

为了刷新<body>元素在AJAX调用之后,我在AJAX响应的顶部用JSON编写以下内容:$o[ \'classes\' ] = get_body_class(\'project\');然后,我可以在JSON响应中看到以下内容:\"classes\":[\"single\",\"single-project\" ,\"postid-1793\",\"logged-in\",\"project\",\"default\"]我正在尝试使用jQuery将所有这些类放入主体中,以便“刷新”它们