3

リンク用にこの簡単なツールチップ関数を作成しました。

$(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

しかし、それは失敗しました。提案？

4

2 に答える 2

6

変数に格納されている値titleはその関数に対してローカルであり、関数の実行が完了すると失われます。

1 つの解決策は、以前のタイトルを要素の に保存すること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()...しかし、使用する方が安全だと思います。

于 2010-07-03T11:23:23.053 に答える
2

タイトル変数は、最初のハンドラーのスコープにのみ存在します。2 番目のハンドラーからアクセスできる別の場所に値を保存する必要があります。

于 2010-07-03T11:24:23.227 に答える