Javascript 无法将函数合并到一个文件中
我有两个功能,一个用于显示图像库,另一个用于平滑向上滚动图标。问题是,当我单独使用它们时,它们都可以工作。但当我把它们放在同一个文件中时,只有第一个文件起作用。我想不出这个问题。我正在使用jquery-2.0.3 这是我的密码:Javascript 无法将函数合并到一个文件中,javascript,jquery,Javascript,Jquery,我有两个功能,一个用于显示图像库,另一个用于平滑向上滚动图标。问题是,当我单独使用它们时,它们都可以工作。但当我把它们放在同一个文件中时,只有第一个文件起作用。我想不出这个问题。我正在使用jquery-2.0.3 这是我的密码: $(函数(){ $('.demo li').picEyes(); //缓存滚动顶部元素 //console.log(“功能移到顶部”); var ScrollButton=$(“#滚动”); $(窗口)。滚动(函数(){ //log($(this.scrollTop()
$(函数(){
$('.demo li').picEyes();
//缓存滚动顶部元素
//console.log(“功能移到顶部”);
var ScrollButton=$(“#滚动”);
$(窗口)。滚动(函数(){
//log($(this.scrollTop());
如果($(this).scrollTop()>=50){
ScrollButton.show()
}否则{
ScrollButton.hide();
}
});
//点击按钮滚动至页面顶部
滚动按钮。单击(函数(){
$(“html,body”).animate({
滚动顶部:0
}, 800);
});
});
picEyes功能的代码:
(function($){
$.fn.picEyes = function(){
var $obj = this;
var num,zg = $obj.length - 1;
var win_w = $(window).width();
var win_h = $(window).height();
var eyeHtml = '<div class="picshade"></div>'
+'<a class="pictures_eyes_close" href="javascript:;"></a>'
+'<div class="pictures_eyes">'
+'<div class="pictures_eyes_in">'
+'<img src="" />'
+'<div class="next"></div>'
+'<div class="prev"></div>'
+'</div>'
+'</div>'
+'<div class="pictures_eyes_indicators"></div>';
$('body').append(eyeHtml);
$obj.click(function() {
$(".picshade").css("height", win_h);
var n = $(this).find("img").attr('src');
$(".pictures_eyes img").attr("src", n);
num = $obj.index(this);
popwin($('.pictures_eyes'));
});
$(".pictures_eyes_close,.picshade,.pictures_eyes").click(function() {
$(".picshade,.pictures_eyes,.pictures_eyes_close,.pictures_eyes_indicators").fadeOut();
$('body').css({'overflow':'auto'});
});
$('.pictures_eyes img').click(function(e){
stopPropagation(e);
});
$(".next").click(function(e){
if(num < zg){
num++;
}else{
num = 0;
}
var xx = $obj.eq(num).find('img').attr("src");
$(".pictures_eyes img").attr("src", xx);
stopPropagation(e);
popwin($('.pictures_eyes'));
});
$(".prev").click(function(e){
if(num > 0){
num--;
}else{
num = zg;
}
var xx = $obj.eq(num).find('img').attr("src");
$(".pictures_eyes img").attr("src", xx);
stopPropagation(e);
popwin($('.pictures_eyes'));
});
function popwin(obj){
$('body').css({'overflow':'hidden'});
var Pwidth = obj.width();
var Pheight = obj.height();
obj.css({left:(win_w - Pwidth)/2,top:(win_h - Pheight)/2}).show();
$('.picshade,.pictures_eyes_close').fadeIn();
indicatorsList();
}
function updatePlace(obj){
var Pwidth = obj.width();
var Pheight = obj.height();
obj.css({left:(win_w - Pwidth)/2,top:(win_h - Pheight)/2});
}
function indicatorsList(){
var indHtml = '';
$obj.each(function(){
var img = $(this).find('img').attr('src');
indHtml +='<a href="javascript:;"><img src="'+img+'"/></a>';
});
$('.pictures_eyes_indicators').html(indHtml).fadeIn();
$('.pictures_eyes_indicators a').eq(num).addClass('current').siblings().removeClass('current');
$('.pictures_eyes_indicators a').click(function(){
$(this).addClass('current').siblings().removeClass('current');
var xx = $(this).find('img').attr("src");
$(".pictures_eyes img").attr("src", xx);
updatePlace($('.pictures_eyes'));
});
}
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
}
})(jQuery);
(函数($){
$.fn.picEyes=函数(){
var$obj=此;
var num,zg=$obj.length-1;
var win_w=$(window.width();
var win_h=$(window.height();
var eyeHtml=''
+''
+''
+''
+''
+''
+''
+''
+''
+'';
$('body').append(eyeHtml);
$obj.单击(函数(){
$(“.picshade”).css(“高度”,win_h);
var n=$(this.find(“img”).attr(“src”);
$(“.pictures\u eyes img”).attr(“src”,n);
num=$obj.index(此);
popwin($('.pictures_-eyes');
});
$(“.pictures\u eyes\u close,.picshade,.pictures\u eyes”)。单击(函数(){
$(“.picshade、.pictures\u eyes、.pictures\u eyes\u close、.pictures\u eyes\u indicators”).fadeOut();
$('body').css({'overflow':'auto'});
});
$('.pictures\u eyes img')。单击(函数(e){
停止传播(e);
});
$(“.next”)。单击(函数(e){
如果(num0){
num--;
}否则{
num=zg;
}
var xx=$obj.eq(num.find('img').attr(“src”);
$(“.pictures\u eyes img”).attr(“src”,xx);
停止传播(e);
popwin($('.pictures_-eyes');
});
函数popwin(obj){
$('body').css({'overflow':'hidden'});
var Pwidth=obj.width();
var Pheight=物体高度();
css({左:(win_w-Pwidth)/2,上:(win_h-Pheight)/2});
$('.picshade,.pictures_-eyes_-close').fadeIn();
指示符列表();
}
函数更新替换(obj){
var Pwidth=obj.width();
var Pheight=物体高度();
css({左:(win_w-Pwidth)/2,上:(win_h-Pheight)/2});
}
函数指示符列表(){
var indHtml='';
$obj.每个(函数(){
var img=$(this.find('img').attr('src');
indHtml+='';
});
$('.pictures\u eyes\u indicators').html(indHtml.fadeIn();
$('.pictures\u eyes\u indicators a').eq(num).addClass('current').sides().removeClass('current');
$('.pictures\u eyes\u indicators a')。单击(函数(){
$(this).addClass('current').sides().removeClass('current');
var xx=$(this.find('img').attr(“src”);
$(“.pictures\u eyes img”).attr(“src”,xx);
更新位置($('.pictures_-eyes');
});
}
功能停止播放(e){
e=e | | window.event;
如果(如停止播放){
e、 停止传播();
}否则{
e、 取消气泡=真;
}
}
}
})(jQuery);
您应该添加click事件处理程序,当DOM准备就绪时,执行以下操作:-
$(function () {
$('.demo li').picEyes();
// Caching the Scroll Top Element
// console.log("function move to top");
//var ScrollButton =ScrollButton.click
var ScrollButton = $("#scroll")
$(window).scroll(function () {
// console.log($(this).scrollTop());
if ($(this).scrollTop() >= 50) {
ScrollButton.show()
} else {
ScrollButton.hide();
}
});
// Click On Button To Scroll To Top Of The Page
ScrollButton.click(function () {
$("html,body").animate({
scrollTop: 0
}, 800);
});
});
我打赌这两个脚本都有自己的ScrollButton元素,在加载gallery时,它会编写其他ScrollButton元素的行为。我将picEyes函数的调用放在主函数之外,并以某种方式工作了 从何处获得滚动按钮?是你定义/创建它的地方吗?在当前代码中,我无法确定您的意思是注释掉
var ScrollButton=$(“#scroll”)代码>?这对你的代码来说是必要的不,它没有注释。复制代码时出错。问题还在这里。我想了想,但什么也没发现。我会添加picEyes函数的代码,可能会对你有所帮助。