将变量从我的点击事件传递给函数

发布于 2024-10-01 18:27:13 字数 672 浏览 7 评论 0原文

我的意思是，除了使用全局之外，还有更有效的方法吗？我讨厌使用全局变量，但我似乎无法弄清楚如何将 href 属性传递给函数。

$(document).ready(function(){
var src
$('.thumbs li a').click(function(){
     src=$(this).attr('href')
     loadImage();
     return false;  
})

function loadImage(){
 var img = new Image();
 $(img).load(function () {
        //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
        $(this).hide();
        $('.large_img_holder').removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr('src', src );
 }
});

原文

Is there a more efficient way to do this, I mean other than using a global? I hate to use global variables but I just can't seem to figure out how to pass the href attribute to the function.

$(document).ready(function(){
var src
$('.thumbs li a').click(function(){
     src=$(this).attr('href')
     loadImage();
     return false;  
})

function loadImage(){
 var img = new Image();
 $(img).load(function () {
        //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
        $(this).hide();
        $('.large_img_holder').removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr('src', src );
 }
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

影子是时光的心 2024-10-08 18:27:13

我不确定这是否是您想要的，但是如果您允许 loadImage 函数将 src 作为参数，那么您可以避免定义 ready 函数中的 src 变量：

$(document).ready(function(){
$('.thumbs li a').click(function(){
     var src=$(this).attr('href')
     loadImage(src);
     return false;  
})

function loadImage(src){
 var img = new Image();
 $(img).load(function () {
        //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
        $(this).hide();
        $('.large_img_holder').removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr('src', src );
 }
});

I'm not sure if this is what you're after, but if you allow the loadImage function to take src as a parameter then you can avoid defining the src variable in the ready function:

$(document).ready(function(){
$('.thumbs li a').click(function(){
     var src=$(this).attr('href')
     loadImage(src);
     return false;  
})

function loadImage(src){
 var img = new Image();
 $(img).load(function () {
        //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
        $(this).hide();
        $('.large_img_holder').removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr('src', src );
 }
});

回复收藏 0 原文

孤独患者 2024-10-08 18:27:13

您可以简单地将其作为参数传递：

function loadImage(new_src){
  var img = new Image();
  $(img).load(function () {
         //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
         $(this).hide();
         $('.large_img_holder').removeClass('loading').append(this);
         $(this).fadeIn();
     }).error(function () {
         // notify the user that the image could not be loaded
     }).attr('src', new_src );
  });
}

$('.thumbs li a').click(function(){
     loadImage($(this).attr('href'));
     return false;  
})

You could simply pass it as a param:

function loadImage(new_src){
  var img = new Image();
  $(img).load(function () {
         //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
         $(this).hide();
         $('.large_img_holder').removeClass('loading').append(this);
         $(this).fadeIn();
     }).error(function () {
         // notify the user that the image could not be loaded
     }).attr('src', new_src );
  });
}

$('.thumbs li a').click(function(){
     loadImage($(this).attr('href'));
     return false;  
})

回复收藏 0 原文

那伤。 2024-10-08 18:27:13

首先，src 变量是在 $(document).ready(function(){/*...*/}; 内部声明的，因此它不是全局的。此外，您可以使用 loadImage 函数的参数而不是 src 变量：

$(document).ready(function(){
    var loadImage = function(src){
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none');
            //.hide() doesn't work in Safari when the element isn't on the DOM already
            $(this).hide();
            $('.large_img_holder').removeClass('loading').append(this);
            $(this).fadeIn();
        }).error(function () {
        // notify the user that the image could not be loaded
        }).attr('src', src );
    };

    $('.thumbs li a').click(function(){
         loadImage($(this).attr('href'));
         return false;  
    });
});

First of all the src variable is declared inside of $(document).ready(function(){/*...*/}; so it is not global. Moreover you can use parameters of loadImage functions instead of src variable:

$(document).ready(function(){
    var loadImage = function(src){
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none');
            //.hide() doesn't work in Safari when the element isn't on the DOM already
            $(this).hide();
            $('.large_img_holder').removeClass('loading').append(this);
            $(this).fadeIn();
        }).error(function () {
        // notify the user that the image could not be loaded
        }).attr('src', src );
    };

    $('.thumbs li a').click(function(){
         loadImage($(this).attr('href'));
         return false;  
    });
});

回复收藏 0 原文

~没有更多了~