javascript - hover から offhover に変数を渡す

Question

http://jsfiddle.net/MwQbE/

以下のjQueryがありますが、2番目の関数に渡す変数を取得できません

$("img").hover(function(){
    var $image = $(this);
    var $imageNowWidth = $image.width();
},function() {
    // get variable value for $image and $imageNowWidth   
});​

jsFiddle でテストするとうまくいきません。変数を 2 番目の関数に渡すにはどうすればよいですか?

Answer 1

これらの 2 つの変数を外部.hoverで定義するだけで、mouseleave 関数内で使用できます。下記参照、

var $image, $imageNowWidth;
$("img").hover(function(){ //mouseenter
   $image = $(this);
   $imageNowWidth = $image.width();
},function() {            //mouseleave
    //$image and $imageNowWidth is accessible HERE
});​

this関数内で利用できることを明確にしたいmouseleaveので、内部で行っているのと同じかそれ以上のことができますmouseenter

Answer 2

getterおよびsetterforimageをimageNoWidth以下のように定義します。

var getImage, getImageNoWidth;
$("img").hover(function(){
   $image = $(this);
   $imageNowWidth = $image.width();
    getImage = function(){
        return $image;
    };
    getImageNoWidth = function(){
        return $imageNowWidth;
    };
},function() {
    // get variable value for $image (getImage()) and $imageNowWidth (getImageNoWidth())
}

Answer 3

変数を外部で宣言して、両方の関数でアクセスできるようにします。

var image;
var imageNowWidth;
$("img").hover(function(){
    image = $(this);
    imageNowWidth = $image.width();
},function() {
    // get variable value for $image and $imageNowWidth   
});​

Answer 4

jquery 'data' メソッドを使用して、変数を jquery オブジェクトに直接格納します。

$("img").hover(function(){
    var $image = $(this);
    $image.data('imageNowWidth',$image.width());
},function() {
    var previousImageWidth = $(this).data('imageNowWidth');
    // do whatever you want to do with the width       
});​