Question

我有两个功能，一个用于显示图像库，另一个用于平滑向上滚动图标。问题是当我单独使用它们时，它们都有效。但是当我把它们放在同一个文件中时，只有第一个工作。我无法弄清楚问题所在。我正在使用jquery-2.0.3 这是我的代码：

$(function() {
  $('.demo li').picEyes();
  // Caching the Scroll Top Element
  //    console.log("function move to top");  
  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);
  });
});

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

Answer 1

你应该添加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);
    });

    });

Answer 2

我敢打赌这两个脚本都有自己的ScrollButton元素，并且在加载gallery时，它会强制其他ScrollButton元素的行为。

Answer 3

我将picEyes函数的调用放在main函数之外，并以某种方式工作！

无法将函数合并到一个文件中

3 个答案: