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

次のmouseleave関数にdefault_img varを渡すにはどうすればよいですか？ 助けてくれてありがとう:)

Answer 1

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

設定をして、あなたはまた、手の前に*上の属性データ - を設定することができ、後でネイティブJS

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

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

を通じて

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

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

それを取得html自体はJSを使用して初期データを設定する必要はありません

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

jQuery's data() method

Answer 3

dataset reference

data-* attributes reference

あなたはグローバル変数を使用する必要があります。関数は、外部から呼び出される関数ではなく、呼び出す関数に直接変数を渡すことができます。

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

あなたはそれを直接渡すことはできません - あなたは外側の変数に格納することができます - しかし、あなたは、各項目でそれをしなければならない：あなたは2 $を入力した場合

$('.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); 
    }); 
});