jQuery懸停不起作用

Question

我希望jQuery能夠在將鼠標懸停在某個元素上之後執行某些操作並在鼠標上執行其他操作。

我寫了這個：

jQuery('.item').hover(

     function() { 
      var bg = jQuery(this).attr('data-background'); 
      jQuery(this).css("background-color", bg); 
     }, 

     function() { /* this doesn't seem to work */ 
      alert(bg); 
     }); 

你能告訴我爲什麼這個代碼工作正常，直到兩個作用，所以它永遠不會提醒什麼嗎？我相信有一個錯字，但我找不到它;/

Answer 1

那麼，bg沒有在第二個函數中定義。它只是第一個地方。這將工作：

jQuery('.item').hover(
    function() { 
     var bg = jQuery(this).attr('data-background'); 
     jQuery(this).css("background-color", bg); 
    }, 
    function() { 
     var bg = jQuery(this).attr('data-background'); 
     alert(bg); 
}); 

DEMO

爲了公平對待的upvotes，你可以也由兩個功能定義在一個範圍bg訪問：

(function() { 
    var bg; 
    jQuery('.item').hover(
     function() { 
      bg = jQuery(this).attr('data-background'); 
      jQuery(this).css("background-color", bg); 
     }, 
     function() { 
      alert(bg); 
    }); 
}()); 

這裏立即功能創建一個新的範圍（因此bg不污染全球範圍）。但是否這是必要的取決於你實際想要做什麼。

DEMO

---

在jQuery 1.4.3中，您可以訪問data-background也.data()：

var bg = jQuery(this).data('background');