Javascript $(窗口)。加载和(文档)。准备好了吗

Javascript $(窗口)。加载和(文档)。准备好了吗,javascript,jquery,slider,Javascript,Jquery,Slider,我正在编辑一个模板,但我对javascript一无所知。在一个页面上有一个滑块,要加载滑块,有一个使用(document.ready)的javascript 在模板的另一个页面上有另一个函数$(window)。加载该页面上的过滤器和一些元素 我想制作一个包含这两个元素的页面:滑块和下面的元素,以及过滤它们的按钮 我已经复制了secon页面上滑块的html和javascript,但是我注意到这两个javascript“互相残杀”:如果两者都存在,文件归档脚本将无法工作。如果我删除代码以对滑块进行l

我正在编辑一个模板,但我对javascript一无所知。在一个页面上有一个滑块,要加载滑块,有一个使用(document.ready)的javascript

在模板的另一个页面上有另一个函数$(window)。加载该页面上的过滤器和一些元素

我想制作一个包含这两个元素的页面:滑块和下面的元素,以及过滤它们的按钮

我已经复制了secon页面上滑块的html和javascript,但是我注意到这两个javascript“互相残杀”:如果两者都存在,文件归档脚本将无法工作。如果我删除代码以对滑块进行lod,则过滤功能可以完美工作。我怎样才能解决这个问题

代码如下:

滑块:

//Revolution Slider
var tpj = jQuery;
tpj.noConflict();

tpj(document).ready(function () {

    if (tpj.fn.cssOriginal != undefined)
        tpj.fn.css = tpj.fn.cssOriginal;

    tpj('.fullwidthbanner').revolution(
        {
            delay: 9000,
            startwidth: 1920,
            startheight: 649,
            onHoverStop: "off",                      // Stop Banner Timet at Hover on Slide on/off
            thumbWidth: 100,                         // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
            thumbHeight: 50,
            thumbAmount: 3,
            hideThumbs: 0,
            navigationType: "bullet",                // bullet, thumb, none
            navigationArrows: "none",                // nexttobullets, solo (old name verticalcentered), none
            navigationStyle: "round",                // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
            navigationHAlign: "center",              // Vertical Align top,center,bottom
            navigationVAlign: "bottom",                  // Horizontal Align left,center,right
            navigationHOffset: 30,
            navigationVOffset: 40,
            soloArrowLeftHalign: "left",
            soloArrowLeftValign: "center",
            soloArrowLeftHOffset: 20,
            soloArrowLeftVOffset: 0,
            soloArrowRightHalign: "right",
            soloArrowRightValign: "center",
            soloArrowRightHOffset: 20,
            soloArrowRightVOffset: 0,
            touchenabled: "on",                      // Enable Swipe Function : on/off
            stopAtSlide: -1,                         // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
            stopAfterLoops: -1,                      // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
            hideCaptionAtLimit: 0,                   // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
            hideAllCaptionAtLilmit: 0,               // Hide all The Captions if Width of Browser is less then this value
            hideSliderAtLimit: 0,                    // Hide the whole slider, and stop also functions if Width of Browser is less than this value
            fullWidth: "on",
            shadow: 0                                //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)
        });
});
过滤功能:

$(window).load(function () {
    $(function () {
        $.Isotope.prototype._getCenteredMasonryColumns = function () {
            this.width = this.element.width();
            var parentWidth = this.element.parent().width();
            // i.e. options.masonry && options.masonry.columnWidth
            var colW = this.options.masonry && this.options.masonry.columnWidth ||
            // or use the size of the first item
            this.$filteredAtoms.outerWidth(true) ||
            // if there's no items, use size of container
            parentWidth;
            var cols = Math.floor(parentWidth / colW);
            cols = Math.max(cols, 1);
            // i.e. this.masonry.cols = ....
            this.masonry.cols = cols;
            // i.e. this.masonry.columnWidth = ...
            this.masonry.columnWidth = colW;
        };

        $.Isotope.prototype._masonryReset = function () {
            // layout-specific props
            this.masonry = {};
            // FIXME shouldn't have to call this again
            this._getCenteredMasonryColumns();
            var i = this.masonry.cols;
            this.masonry.colYs = [];
            while (i--) {
                this.masonry.colYs.push(0);
            }
        };

        $.Isotope.prototype._masonryResizeChanged = function () {
            var prevColCount = this.masonry.cols;
            // get updated colCount
            this._getCenteredMasonryColumns();
            return (this.masonry.cols !== prevColCount);
        };

        $.Isotope.prototype._masonryGetContainerSize = function () {
            var unusedCols = 0,
                i = this.masonry.cols;
            // count unused columns
            while (--i) {
                if (this.masonry.colYs[i] !== 0) {
                    break;
                }
                unusedCols++;
            }
            return {
                height: Math.max.apply(Math, this.masonry.colYs),
                // fit container to columns that have been used;
                width: (this.masonry.cols - unusedCols) * this.masonry.columnWidth
            };
        };

        var $container = $('#container'),
            $body = $('body'),
            colW = 1,
            columns = null;

        $container.isotope({
            // disable window resizing
            resizable: false,
            masonry: {
                columnWidth: colW
            }
        });

        //FILTERING
        $('#filters a').click(function () {
            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector
            });
            return false;
        });
    });
});

现在发生的是,您正在第一个文件中调用
jQuery.noConflict()
。该方法使jQuery放弃对
$
变量的控制(将其返回到上一个值,默认情况下,该值是
未定义的
)。在第二个文件中,您使用的是
$
,当然,到那时还没有定义,这就是代码无法工作的原因

请删除对
noConflict()
的调用,或将代码包装到第二个文件中:

(function($) {
    //...your code here ( $(window).load() and all else)
})(jQuery);

这样,
$
变量再次在代码中定义,但仅在该函数中定义。然而,我坚持第一种解决方案。如果使用jQuery,则只有在有充分理由将
$
变量用于其他用途时,才应调用
.noConflict()
。请记住,当人们看到
$
时,他们会想到jQuery。这几乎是一个标准。

谢谢,认为这条线解决了问题。另一种解决方案似乎不起作用:(