Javascript $(窗口)。加载和(文档)。准备好了吗
我正在编辑一个模板,但我对javascript一无所知。在一个页面上有一个滑块,要加载滑块,有一个使用(document.ready)的javascript 在模板的另一个页面上有另一个函数$(window)。加载该页面上的过滤器和一些元素 我想制作一个包含这两个元素的页面:滑块和下面的元素,以及过滤它们的按钮 我已经复制了secon页面上滑块的html和javascript,但是我注意到这两个javascript“互相残杀”:如果两者都存在,文件归档脚本将无法工作。如果我删除代码以对滑块进行lod,则过滤功能可以完美工作。我怎样才能解决这个问题 代码如下: 滑块:Javascript $(窗口)。加载和(文档)。准备好了吗,javascript,jquery,slider,Javascript,Jquery,Slider,我正在编辑一个模板,但我对javascript一无所知。在一个页面上有一个滑块,要加载滑块,有一个使用(document.ready)的javascript 在模板的另一个页面上有另一个函数$(window)。加载该页面上的过滤器和一些元素 我想制作一个包含这两个元素的页面:滑块和下面的元素,以及过滤它们的按钮 我已经复制了secon页面上滑块的html和javascript,但是我注意到这两个javascript“互相残杀”:如果两者都存在,文件归档脚本将无法工作。如果我删除代码以对滑块进行l
//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。这几乎是一个标准。谢谢,认为这条线解决了问题。另一种解决方案似乎不起作用:(