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

jquery global var vs local var

2 个答案: