问题
I'm editing a template, but I know zero about javascript. On one page there is a slider, to load the slider there is a javascript using (document).ready.
On another page of the template there is another function $(window).load the filters some elements on the page.
I would like to make a page with both this elements: the slider and, below, the elements with the buttons to filter them.
I have copied the html and the javascript of the slider on the secon page, but I have noticed that the 2 javascript "kill each other": if both are present, the filering script does not work. If I remove the code to lod the slider, then the filtering function work perfectly. How can I fix the probem?
here is the code:
Slider:
//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 !)
});
});
Filtering function:
$(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;
});
});
});
回答1:
Well, what's happening is that you're calling jQuery.noConflict() in the first file. That method makes jQuery relinquish control of the $ variable (returns it to previous value, which, by default, is undefined). In your second file you are using $ which, of course, is undefined by then, and that's why your code does not work.
Either remove the call to noConflict() or wrap the code in the second file in this:
(function($) {
//...your code here ( $(window).load() and all else)
})(jQuery);
This way, the $ variable is again defined in your code, but only inside that function. However, I'd stick with the first solution. If you're using jQuery, calling .noConflict() should be done only if you have very good reasons to use the $ variable for another purpose. Keep in mind that when people sees $ they will think about jQuery. It's almost a standard.
来源：https://stackoverflow.com/questions/22352607/window-load-and-document-ready