Question

我正在编辑模板，但我对javascript一无所知。在一个页面上有一个滑块，加载滑块有一个javascript使用（文件）.ready。

在模板的另一页上有另一个函数$（window）.load过滤页面上的一些元素。

我想创建一个包含这两个元素的页面：滑块和下面的元素以及用于过滤它们的按钮。

我已经在secon页面上复制了滑块的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。它几乎是一个标准。

$（window）.load和（document）.ready

1 个答案: