javascript - JS文件中的一些冲突

Question

我已经完成了 JS 文件，需要将其集成到 Drupal 主题中，但是存在一些冲突或其他问题，因此看起来脚本的某些部分根本无法工作。脚本在 HTML 主题上运行没有问题。

这是整个脚本:

jQuery.noConflict();
(function( $ ) {
  $(function() {
/*********************************************************************************************************/
/* -------------------------------------- Navigation ------------------------------------------ */
/*********************************************************************************************************/
//Add class to inernal and external links
$('.navbar-nav a').each(function(index, element) {
    if($(element).attr("href").match("^#"))
    {
        //Add class to inernal links
        $(element).addClass("internal");
    }
    else
    {
        //Add class to external links
        $(element).addClass("external");
    }
});

var lastId,
    topMenu = $(".navbar-nav"),
    topMenuHeight = topMenu.outerHeight(),
    // All list items without external links
    menuItems = topMenu.find("a").not(".external"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function() {
        var item = $($(this).attr("href"));
        if (item.length) {
            return item;
        }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e) {
    if (!$(this).hasClass("dropdown-toggle")) {
        var href = $(this).attr("href"),
            offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1;
        $('html, body').stop().animate({
            scrollTop: offsetTop
        }, 1450,  'easeInOutQuart');
        e.preventDefault();
    }
});

// Bind to scroll
$(window).scroll(function() {
    // Get container scroll position
    var fromTop = $(this).scrollTop() + topMenuHeight;

    // Get id of current scroll item
    var cur = scrollItems.map(function() {
        if ($(this).offset().top < fromTop)
            return this;
    });
    // Get the id of the current element
    cur = cur[cur.length - 1];
    var id = cur && cur.length ? cur[0].id : "";

    if (lastId !== id) {
        lastId = id;
        // Set/remove active class
        menuItems
            .parent().removeClass("active")
            .end().filter("[href=#" + id + "]").parent().addClass("active");
    }
});


/*********************************************************************************************************/
/* -------------------------------------- Home part - 100% hight ------------------------------------------ */
/*********************************************************************************************************/
jQuery.fn.refresh = function() {
    var s = skrollr.get();

    if (s) {
        s.refresh(this);
    }
    return this;
};

function fullHeight() {
    windowHeight = $(window).height();
    $('#home, .tp-banner-container').css('height', windowHeight).refresh();
};
fullHeight();
$(window).resize(function() {
    fullHeight();
});


/*********************************************************************************************************/
/* -------------------------------------- H2 big shadow ------------------------------------------ */
/*********************************************************************************************************/
$("h2").each(function () {
    var h2 = $(this);
    var span = h2.parent().find("span.title-shadow");
    span.append(h2.html());
});


/*********************************************************************************************************/
/* -------------------------------------- Back to top ------------------------------------------ */
/*********************************************************************************************************/
$(".logo").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "easeInOutQuart");
  return false;
});


/*********************************************************************************************************/
/* -------------------------------------- Contact form ------------------------------------------ */
/*********************************************************************************************************/
(function(e) {
    function n(e, n) {
        this.$form = e;
        this.indexes = {};
        this.options = t;
        for (var r in n) {
            if (this.$form.find("#" + r).length && typeof n[r] == "function") {
                this.indexes[r] = n[r]
            } else {
                this.options[r] = n[r]
            }
        }
        this.init()
    }
    var t = {
        _error_class: "error",
        _onValidateFail: function() {}
    };
    n.prototype = {
        init: function() {
            var e = this;
            e.$form.on("submit", function(t) {
                e.process();
                if (e.hasErrors()) {
                    e.options._onValidateFail();
                    t.stopImmediatePropagation();
                    return false
                }
                return true
            })
        },
        notEmpty: function(e) {
            return e != "" ? true : false
        },
        isEmail: function(e) {
            return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(e)
        },
        isUrl: function(e) {
            var t = new RegExp("(^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|(www\\.)?))[\\w-]+(\\.[\\w-]+)+([\\w-.,@?^=%&:/~+#-]*[\\w@?^=%&;/~+#-])?", "gim");

            return t.test(e)
        },
        elClass: "",
        setClass: function(e) {
            this.elClass = e
        },
        process: function() {
            this._errors = {};
            for (var t in this.indexes) {
                this.$el = this.$form.find("#" + t);
                if (this.$el.length) {
                    var n = e.proxy(this.indexes[t], this, e.trim(this.$el.val()))();
                    if (this.elClass) {
                        this.elClass.toggleClass(this.options._error_class, !n);
                        this.elClass = ""
                    } else {
                        this.$el.toggleClass(this.options._error_class, !n)
                    }
                    if (!n) {
                        this._errors[t] = n
                    }
                }
                this.$el = null
            }
        },
        _errors: {},
        hasErrors: function() {
            return !e.isEmptyObject(this._errors)
        }
    };
    e.fn.isValid = function(t) {
        return this.each(function() {
            var r = e(this);
            if (!e.data(r, "is_valid")) {
                e.data(r, "is_valid", new n(r, t))
            }
        })
    }
})(jQuery)


/*********************************************************************************************************/
/* -------------------------------------- Ajax contact form ------------------------------------------ */
/*********************************************************************************************************/
$('#forms').isValid({
    'name': function(data) {
        this.setClass(this.$el.parent());
        return this.notEmpty(data);
    },
    'email': function(data) {
        this.setClass(this.$el.parent());
        return this.isEmail(data);
    },
    'subject': function(data) {
        this.setClass(this.$el.parent());
        return this.notEmpty(data);
    },
    'message': function(data) {
        this.setClass(this.$el.parent());
        return this.notEmpty(data);
    }
}).submit(function(e) {
    e.preventDefault();

    var $this = $(this);
    $.ajax({
        'url': $(this).attr('action'),
        'type': 'POST',
        'dataType': 'html',
        'data': $(this).serialize()
    }).done(function(response) {
        $this.find('.notification').show();
        $this.find('input[type="text"], input[type="email"], textarea').val('');
    });
    return false;
});

$('.notification').on('click', function() {
    var $this = $(this);
    $this.hide();
});


/*********************************************************************************************************/
/* -------------------------------------- Sticky navigation ------------------------------------------ */
/*********************************************************************************************************/
$("#navigation").sticky({
    topSpacing: 0,
    className: 'sticky',
    wrapperClassName: 'main-menu-wrapper'
});


/*********************************************************************************************************/
/* -------------------------------------- Wow Scroll Animate ------------------------------------------ */
/*********************************************************************************************************/
wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 100,
    movile: true

});


/*********************************************************************************************************/
/* -------------------------------------- Skrollr and Wow init ------------------------------------------ */
/*********************************************************************************************************/
if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

    //Skrollr
    var s = skrollr.init({
        edgeStrategy: 'set',
        forceHeight: true,
        smoothScrolling: true,
        easing: {
            wtf: Math.random,
            inverted: function(p) {
                return 1 - p;
            }
        }
    });
    //Wow init
    wow.init();
}


/*********************************************************************************************************/
/* -------------------------------------- Charts, Skils ------------------------------------------ */
/*********************************************************************************************************/
$('.chart').waypoint(function() {
    $(this).easyPieChart({
        animate: 1000,
        size: 200,
        lineWidth: 5,
        trackColor: "#fff",
        barColor:"#de3926",
        scaleColor: false,
        size: 200,
        onStep: function(from, to, percent) {
            jQuery(this.el).find('.percent').text(Math.round(percent));
        }
    });
}, {
    triggerOnce: true,
    offset: 'bottom-in-view'
});


$(document).ready(function() {
    /*********************************************************************************************************/
    /* -------------------------------------- Our work ------------------------------------------ */
    /*********************************************************************************************************/
    App.gridOption1();


    /*********************************************************************************************************/
    /* -------------------------------------- Ajax our team ------------------------------------------ */
    /*********************************************************************************************************/
    $('.ajax-popup-team').magnificPopup({
        type: 'ajax',
        showCloseBtn: true,
        modal: true,
        closeOnContentClick: false,
        overflowY: 'scroll'
    });


    /*********************************************************************************************************/
    /* -------------------------------------- Ajax portfolio page ------------------------------------------ */
    /*********************************************************************************************************/
    $('.ajax-popup-portfolio').magnificPopup({
        type: 'ajax',
        showCloseBtn: true,
        modal: true,
        closeOnContentClick: false,
        overflowY: 'scroll',
        gallery: {
           enabled: true,
           arrowMarkup: '<button title="%title%" type="button" class="portfolio mfp-arrow mfp-arrow-%dir%"></button>'
        }
    });


    /*********************************************************************************************************/
    /* -------------------------------------- Portfolio gallery ------------------------------------------ */
    /*********************************************************************************************************/
    $('.gallery-item-content').each(function() { // the containers for all your galleries
        $(this).magnificPopup({
            delegate: '.gallery-item', // the selector for gallery item
            type: 'image',
            gallery: {
                enabled: true
            }
        });
    });

    /*********************************************************************************************************/
    /* -------------------------------------- Video ------------------------------------------ */
    /*********************************************************************************************************/
    $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: true,
        fixedContentPos: true
    });


    /*********************************************************************************************************/
    /* -------------------------------------- Owl carousel ------------------------------------------ */
    /*********************************************************************************************************/
    $("#carousel-our-testimonials").owlCarousel({
        autoPlay: 3000,
        stopOnHover: true,
        navigation: false,
        paginationSpeed: 1000,
        goToFirstSpeed: 2000,
        singleItem: true,
        autoHeight: true,
        transitionStyle: "fade"
    });
    $("#carousel-our-clients").owlCarousel({
        autoPlay: 10000,
        stopOnHover: true,
        navigation: true,
        paginationSpeed: 1000,
        goToFirstSpeed: 3500,
        singleItem: false,
        autoHeight: true,
        transitionStyle: "fade",
        navigationText: [
        "<i class='fa fa-angle-left'></i>",
        "<i class='fa fa-angle-right'></i>"
        ]
    }); 
    $("#blog-single").owlCarousel({
        navigation: true, // Show next and prev buttons
        pagination: false,
        slideSpeed: 300,
        paginationSpeed: 400,
        navigationText: [
            "<i class='fa fa-chevron-left'></i>",
            "<i class='fa fa-chevron-right'></i>"
        ],
        singleItem: true
    });

    /*********************************************************************************************************/
    /* -------------------------------------- Dropdown Menu Fade  ------------------------------------------ */
    /*********************************************************************************************************/
    $(".dropdown").hover(
        function() {            
            $('.dropdown-menu', this).fadeIn(275);
            $(this).addClass("open");
        },
        function() {            
            $('.dropdown-menu', this).fadeOut(275);
            $(this).removeClass("open");
    });


    /*********************************************************************************************************/
    /* -------------------------------------- Placeholder fix for IE  ------------------------------------------ */
    /*********************************************************************************************************/
    (function($) {       
        if (!Modernizr.csstransforms3d) {
            $('[placeholder]').focus(function() {
                var input = $(this);
                if (input.val() == input.attr('placeholder')) {
                    input.val('');
                    input.removeClass('placeholder');
                }
            }).blur(function() {
                var input = $(this);
                if (input.val() == '' || input.val() == input.attr('placeholder')) {
                    input.addClass('placeholder');
                    input.val(input.attr('placeholder'));
                }
            }).blur().parents('form').submit(function() {
                $(this).find('[placeholder]').each(function() {
                    var input = $(this);
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                })
            });
        }
    })

});


/*********************************************************************************************************/
/* -------------------------------------- Count  ------------------------------------------ */
/*********************************************************************************************************/
$('#statistic').waypoint(function() {
    $('.timer').countTo();
}, {
    triggerOnce: true,
    offset: 'bottom-in-view'
});


/*********************************************************************************************************/
/* -------------------------------------- Show and hide color-switcher  ------------------------------------------ */
/*********************************************************************************************************/
$(".color-switcher .switcher-button").click(function(){
    $( ".color-switcher" ).toggleClass("show-color-switcher", "hide-color-switcher", 800);
}); 


/*********************************************************************************************************/
/* -------------------------------------- Color Skins  ------------------------------------------ */
/*********************************************************************************************************/
$('a.color').click(function(){
    var title = $(this).attr('title');
    $('#style-colors').attr('href', 'css/color-schemes/' + title + '.css');
    return false;
});


/*********************************************************************************************************/
/* -------------------------------------- Loader  ------------------------------------------ */
/*********************************************************************************************************/
$(window).load(function() {
    $("#loader").delay(450).fadeOut(800);
    $(".preload-gif").addClass('fadeOut');

});

});
})(jQuery);

我希望有人能帮助我找到可能的冲突并解决它。

更新

我查看控制台并发现错误，因此我注释掉了“App.gridOption1();”从脚本来看，看起来一切正常。现在我面临来自控制台的错误，但来自其他脚本的错误。这是该脚本:

$.scrollTo = $.fn.scrollTo = function(x, y, options){
    if (!(this instanceof $)) return $.fn.scrollTo.apply($('html, body'), arguments);

    options = $.extend({}, {
        gap: {
            x: 0,
            y: 0
        },
        animation: {
            easing: 'swing',
            duration: 600,
            complete: $.noop,
            step: $.noop
        }
    }, options);

    return this.each(function(){
        var elem = $(this);
        elem.stop().animate({
            scrollLeft: !isNaN(Number(x)) ? x : $(y).offset().left + options.gap.x,
            scrollTop: !isNaN(Number(y)) ? y : $(y).offset().top + options.gap.y
        }, options.animation);
    });
};

我得到的错误是:

TypeError: undefined is not an object (evaluating '$.fn')
    (anonymous function)

这是该脚本中的第一行。我认为这个错误与我首先发布的脚本的某些部分有关。有一个部分“Home 部分 - 100% hight”与此相关。

有什么建议吗？

Answer 1

$.fn 通常用于 jquery 模块/扩展。确保 jquery 在滚动代码之前加载。
您可能还想查看使用 drupal behaviors and properly integrating js in drupal