jquery - jquery 全局变量与本地变量

Question

试图自学 jquery。以下代码片段可以正常工作，但我认为可以使代码更短/更高效。

  //Alter the stylesheet to hide the contents of the page initially. 
  //When the page is loaded, fade in the contents slowly.
  var backgroundBuffer;
  $('p').mouseover(function() {
      backgroundBuffer = $(this).css("background-color");
      $(this).css({"background-color": 'yellow'});
    }).mouseout(function(){
      $(this).css({"background-color": backgroundBuffer});
  });

我不想全局声明“backgroundBuffer”，因为我再也不会使用它了。但是，如果我在 .mouseover() 中声明它，系统在后面的 .mouseout() 中将无法识别它

  //Alter the stylesheet to hide the contents of the page initially. 
  //When the page is loaded, fade in the contents slowly.
  $('p').mouseover(function() {
      var backgroundBuffer; 
      backgroundBuffer = $(this).css("background-color");
      $(this).css({"background-color": 'yellow'});
    }).mouseout(function(){
      $(this).css({"background-color": backgroundBuffer});
  });

谢谢你的帮助！

Answer 1

使用jQuery数据存储初始值...

$('p').mouseover(function() {
  $(this).data('oldcolor', $(this).css("background-color")).css('background-color', 'yellow');
}).mouseout(function(){
  $(this).css("background-color",$(this).data('oldcolor'));
});

Answer 2

在这种情况下，jQuery 数据方法会很有帮助。这样您就可以从 jQuery 对象访问该变量。

 //Alter the stylesheet to hide the contents of the page initially. 
  //When the page is loaded, fade in the contents slowly.
  $('p').mouseover(function() {
      var $this = $(this);
      $this.data('backgroundbuffer', $this.css("background-color")).css({"background-color": 'yellow'});
    }).mouseout(function(){
      var $this = $(this);
      $this.css({"background-color": $this.data('backgroundbuffer')});
  });