美元(窗口).加载和(文档).ready

Question

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

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

我想创建一个包含以下两个元素的页面:滑块和下面带有过滤按钮的元素。

我已经复制了第二页滑块的html和javascript，但我注意到这2个javascript"互相残杀":如果两者都存在，过滤脚本不起作用。如果我删除代码来加载滑块，那么过滤功能就可以完美地工作。我怎样才能解决这个问题?

下面是代码:

滑块:

//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;
        });
    });
});

Answer 1

在第一个文件中调用jQuery.noConflict()。该方法使jQuery放弃对$变量的控制(将其返回到之前的值，默认值是undefined)。在你的第二个文件中，你使用$，当然，到那时是未定义的，这就是为什么你的代码不起作用。

要么删除对noConflict()的调用，要么将代码包装在第二个文件中:

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

这样，在代码中再次定义$变量，但仅在该函数中定义。然而，我坚持使用第一种解决方案。如果您使用的是jQuery，那么只有当您有非常好的理由将$变量用于其他目的时，才应该调用.noConflict()。请记住，当人们看到$时，他们会想到jQuery。