javascript - jQuery マウス入力/終了

Question

私はhtmlでこのコードを持っています:

<div class="sub-status">
    <p class="subscribed"><i class="icon-check"></i> Subscribed</p>
</div>

ホバーすると、次のように変更されます。

<div class="sub-status">
    <p class="unsubscribe"><i>X</i> Unsubscribe</p>
</div>

そして、私はjQueryでこのコードを持っています:

$(document).ready(function() {
    $('.sub-status').mouseenter(function() {
        $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
    });
    $('.sub-status').mouseleave(function() {
        $('this').html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
    });
});

最初の機能はうまく機能しています。そのdivにマウスオーバーすると、必要なものに変更されますが、マウスリーブが機能しません。そのdivからマウスを離すと、そのデータが以前のように戻ることを望みます。私はこれを機能させることができません。どんな助けでも大歓迎です。

ありがとう。

Answer 1

変化する

$('this')...

に

$(this)...

hover()また、2 つの別個の関数を使用する代わりに使用できます。

$('.sub-status').hover(function() {
    $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},function() {
    $(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});

更新しました

ホバーされた要素のコンテンツ全体を更新しているため、フィドルが機能していません-テキストのみを更新すると機能する<p>はずです。

$('.sub-status').hover(function() {
  $(this).children('p')
              .removeClass()
              .addClass('unsubscribed')
              .html("<i>X</i> Unsubscribe");
  },function() {
     $(this).children('p')
               .removeClass()
               .addClass('subscribed')
               .html("<i class='icon-check'></i> Subscribed");
});

働くフィドル

Answer 2

ホバー機能を使用してみてください：

$(".sub-status").hover(
  function () {
    $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
  },
  function () {
    $(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
  }
);

http://api.jquery.com/hover/

Answer 3

'this'単に に変更しますthis。以下に示すように、連鎖も検討してください。

$(document).ready(function() {
    $('.sub-status').mouseenter(function() {
        $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
    }).mouseleave(function() {
        $(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
    });
});