1

私のジレンマは .live() と .hover() についてです。私が欲しかったのは、「今すぐ購入」ボタンをクリックするたびに、そのアイテムを購入した数を含むサイドバーを更新し（更新してもページは読み込まれません）、カートにカーソルを合わせるとサイドバーの画像をクリックすると、完全な購入の詳細が表示されます (ホバーしたときにのみ表示するようにしたかったので、非表示にしました)。しかし、「購入ボタン」をクリックして購入の更新が表示された直後に、サイドバーにカーソルを合わせようとしましたが、残念ながら詳細がすべて表示されませんでした。ページを更新すると、ホバーは正常に機能しました。友人から .live() を使うように言われましたが、私はまだ初心者なので複雑だと感じました。誰でも私を案内してもらえますか？:(

コード：

$('#shoppingCart').hover(
    function(){
        //div
        $('#div_widget').removeClass('hidden');
        $('.cartDivLight').addClass('cartDivDark');

    },
    function(){
        //div
        $('#div_widget').addClass('hidden');
        $('.cartDivLight').removeClass('cartDivDark');
    }
);

、これは私のスクリプトがどのように見えるかです.live()を統合したかったのですが、うまくいきません.:(

4

2 に答える 2

3

live()併用する必要はありませんhover()。実際、jQuery1.7 の時点では、推奨されない (つまり、将来の jQuery リリースから削除される)on()代わりに、代わりにjQuery メソッドを使用する必要があります。http://api.jquery.com/on/live()

live()、delegate()、メソッドの基本的な利点は、 後で AJAX や JavaScript のメソッドなどon()を介してその要素を追加するまで、まだ存在しない要素に対してホバー、クリックなどのイベントを実行するために使用できることです。createElement

使用方法は次のon()とおりです。

$('#container').on('hover', '#clickableElement', function({ console.log('do something'); });

#container#clickableElementその中に存在する、または最終的に存在する要素です。document.body代わりに使用することもできますが、フォーカスを絞り込むため、jQuery はセレクター#containerを見つけるために検索する必要がありません。#container

開始するための jsfiddle は次のとおりです: http://jsfiddle.net/trpeters1/WrXVu/44/

マウスオーバーの動作はちょっとめちゃくちゃですが、あなたはアイデアを得るでしょう.

于 2012-05-04T00:11:58.000 に答える
2

サイドバーが次のような構造になっているとします。

<div id="sidebar">
    <div class="shoppingCart">
        <div class="static">
            //icon & title
        </div>
        <div class="purchase_details">
            ...
        </div>
    </div>
    <div class="shoppingCart">
        <div class="static">
            //icon & title
        </div>
        <div class="purchase_details">
            ...
        </div>
    </div>
</div>

次に、対応する JavaScript は次のようになります。

$('#sidebar').on('mouseenter', '.shoppingCart', function() {
        var $this = $(this);
        $this.find('.static').addClass('cartDivDark');
        $this.find('.purchase_details').show();
    }).on('mouseleave', '.shoppingCart', function() {
        $this.find('.static').removeClass('cartDivDark');
        $this.find('.purchase_details').hide();
    }
);

私はあなたの HTML を見ていないので、これは 100% 正しいとは言えませんが、必要な原則を示しているはずです。

ノート：

  • .on()に取って代わり、.live()jQuery 1.7.1 から。.delegate().bind()
  • .on()現在および将来のカートに代わって、イベント処理をサイドバーに委任するために使用します。
  • でホバーを委任することはできませんが.on('hover' ...)、ホバーの 2 つのコンポーネント イベントmouseenterとmouseleave.
  • サイドバー内のすべては、ID ではなくクラスで識別されます。これにより、ホバーされた要素内の要素を操作する一般化された mouseenter および mouseleave ハンドラーを作成できます。
于 2012-05-04T00:40:03.083 に答える