jQuery .attr() 问题

Question

我为我的链接编写了一个快速的工具提示函数：

$(function() {
  $('a').hover(function(e) {
    var title = $(this).attr('title');
    $('<div id="tooltip">' + title + '</div>').css({"top" : e.pageY + 12, "left" : e.pageX + 12}).appendTo('body');
  }, function() {
    $('#tooltip').remove();
  });

  $('a').mousemove(function(e){ 
    $('#tooltip').css({"top" : e.pageY + 12, "left" : e.pageX + 12});
  })
});

我希望删除原始标题，因为同时存在两个标题是愚蠢的。我知道应该像这样操作：

$('a').hover(function() {
  $(this).attr('title', '');
});

问题是我无法将其添加回去。 我尝试过：

$(this).attr('title', title) //from my title variable

但是它失败了。有什么建议吗？

- andrei

Answer 1

title变量中存储的值仅在该函数中有效，并且在函数执行完成后就会丢失。

一种解决方法是将前一个标题存储在元素的data()中。

var $th = $(this);

$th.data( 'prevTitle', $th.attr('title') );

在需要时访问它（可能是在您下一个鼠标悬停函数中）。

var $th = $(this);

$th.attr('title', $th.data( 'prevTitle' ));

您可以将变量声明移至两个函数之外。

var title;

$('a').hover(function(e){
     title = $(this).attr('title');
     $('<div id="tooltip">' + title + '</div>').css({"top" : e.pageY + 12, "left" : e.pageX + 12}).appendTo('body');
}, function(){
    $th.attr('title', title);
    $('#tooltip').remove();
});

......但我认为使用data()会更安全。

- user113716

---

在两个函数之外声明变量是正确的做法。 - Gert Grenander

@Gert G @patrick 我使用了变量的外部声明，它完美地工作了。谢谢。 - andrei

@Gert - 你可能是对的，但不知怎么的，我更喜欢将信息与元素绑定，即使这样效率稍微低一些。也许有点不理性吧。:o) - user113716

Answer 2

您的标题变量仅存在于第一个处理程序的范围内。您需要在其他可从第二个处理程序访问的地方存储该值。

- Adrian Godong

---

谢谢。我没有意识到我丢失了那个变量。我只是创建了一个新的变量，现在它可以工作了 :) - andrei