10

jQueryを使用して、ホバー時にこれらのリンク内のスパンを含むテキストを置き換えようとしています。次に、ユーザーがホバーをオフにすると、元のテキストが再び表示されます。

<a class="btn" href="#">
    <img src="#" alt=""/>
    <span>Replace me</span> please
</a>

<a class="btn" href="#">
    <img src="#" alt=""/>
    <span>Replace me</span> please
</a>

最終的な出力は次のようになります

<a class="btn" href="#">
    <img src="#" alt=""/>
    I'm replaced!
</a>

私はいじくり回していますが、それを元に戻す方法がわかりません。何か案は？

$('.btn').hover(function(){
    $(this).text("I'm replaced!");
});
4

5 に答える 5

25 
$('.btn').hover(
    function() {
        var $this = $(this); // caching $(this)
        $this.data('defaultText', $this.text());
        $this.text("I'm replaced!");
    },
    function() {
        var $this = $(this); // caching $(this)
        $this.text($this.data('defaultText'));
    }
);

data-defaultText変数を避けるために、ノード自体に格納されている属性に元のテキストを保存できます

于 2012-05-22T11:30:52.240 に答える
4

これはトリックを行う必要があります

$(function(){
  var prev;    

  $('.btn').hover(function(){
  prev = $(this).text();
      $(this).text("I'm replaced!");
  }, function(){
      $(this).text(prev)
  });
})
于 2012-05-22T11:31:01.467 に答える
1 
$('.btn').hover(function() {
    // store $(this).text() in a variable     
    $(this).text("I'm replaced!");
},
function() {
    // assign it back here
});
于 2012-05-22T11:31:39.363 に答える
1

次のような別の関数をホバーイベントに追加します。

$('.btn').hover(function(){
    $(this).text("I'm replaced!");
}, function() {
    $(this).text("Replace me please");
});

デモへのリンク

于 2012-05-22T11:33:22.580 に答える
0

元の状態に戻すには、変数に格納する必要があります。次のことを試してください。

var text;

$(".btn").hover(function () {
    text = $(this).text();
    $(this).text("I'm replaced!");
},
function () {
    $(this).text(text);
});
于 2012-05-22T11:31:49.313 に答える