将变量传递给javascript中的其他函数

Question

$('.header_menu_item').on('mouseenter',function(){ 
    var default_img = $(this).find('.header_menu_item_icon_img').attr('src'); 
    var hover_img = $(this).find('.header_menu_item_icon_img').attr('data-hover'); 
    $(this).find('.header_menu_item_icon_img').prop('src',hover_img); 
}).on('mouseleave',function(){ 
    $(this).find('.header_menu_item_icon_img').prop('src',default_img); 
}); 

如何将default_img var传递给以下mouseleave函数？ 感谢您的任何帮助:)

Answer 1

一个选项将声明一个变量之外的2个功能。

var default_img = ''; 
$('.header_menu_item').on('mouseenter',function(){ 
default_img = $(this).find('.header_menu_item_icon_img').attr('src'); 
    var hover_img = $(this).find('.header_menu_item_icon_img').attr('data-hover'); 
    $(this).find('.header_menu_item_icon_img').prop('src',hover_img); 
}).on('mouseleave',function(){ 
    $(this).find('.header_menu_item_icon_img').prop('src',default_img); 
}); 

Answer 2

将其设置为元素本身的数据，然后进行检索后

//setting 
$(this).data('default_img',default_img); 

//retrieving 
var img = $(this).data('default_img'); 

通过本地JS

//setting 
this.dataset['default_img'] = default_img; 

//retrieving 
var img = this.dataset['default_img']; 

你也可以事先建立一个数据 - *属性上html本身所以不需要用JS来设置初始数据

<img src="http://example.com/someimg.jpg" data-default_img="http://example.com/someimg.jpg" /> 

data-* attributes reference

dataset reference

jQuery's data() method

Answer 3

您需要使用全局变量。函数只能将变量直接传递给它所调用的函数，而不能将函数调用到外部。

var default_img; 
$('.header_menu_item').on('mouseenter',function(){ 
    default_img = $(this).find('.header_menu_item_icon_img').attr('src'); 
    var hover_img = $(this).find('.header_menu_item_icon_img').attr('data-hover'); 
    $(this).find('.header_menu_item_icon_img').prop('src',hover_img); 
}).on('mouseleave',function(){ 
    $(this).find('.header_menu_item_icon_img').prop('src',default_img); 
}); 

Answer 4

你不能直接通过它 - 你可以将其存储在外部变量 - 但你必须通过每个项目做到这一点：如果你输入两个$（

$('.header_menu_item').each(function(){ 

    var $header_menu_item_icon_img = $(this).find('.header_menu_item_icon_img'), 
     default_img = $header_menu_item_icon_img.attr('src'), 
     hover_img = $header_menu_item_icon_img.attr('data-hover'); 

    $(this).on('mouseenter',function(){ 
    $header_menu_item_icon_img.prop('src',hover_img); 
    }).on('mouseleave',function(){ 
    $header_menu_item_icon_img.prop('src',default_img); 
    }); 
});