jquery - 同じコードjqueryで個々の.hoverをどのように割り当てますか

Question

jqueryを使用して次のスライドアップ効果を作成しましたが、ホバーごとに1回動作させたいです。

 // Get a reference to the container.
            var container = $( ".container" );
            // Bind the link to toggle the slide.
            $("a.hover-btn" ).hover(
                function( e ){
                    // Prevent the default event.
                    e.preventDefault();
                    // Toggle the slide based on its current
                    // visibility.
                    if (container.is( ":visible" )){

                        // Hide - slide up.
                        container.slideUp( 200 );
                        $('a.hover-btn').addClass('off');
                        $('a.hover-btn').removeClass('on');

                    } else {

                        // Show - slide down.
                        container.slideDown( 200 );
                        $('a.hover-btn').addClass('on');
                        $('a.hover-btn').removeClass('off');

                    }
                }
            );

http://jsfiddle.net/zidski/XtBPQ/

score 0 · Accepted Answer

これを試して、これが達成したいものかどうかを確認してください。

$("a.hover-btn").hover(function (e) {
   e.preventDefault();
   $(this).siblings().removeClass('on').slideDown(200);
   $(this).addClass('on');
}, function () {
   $(this).removeClass('on').siblings().slideUp(200);
});

フィドルをチェックアウト

ただし、パフォーマンスの観点から、オブジェクトをキャッシュできます。

var $this = $(this);
$("a.hover-btn").hover(function (e) {
   e.preventDefault();
   $this.siblings().removeClass('on').slideDown(200);
   $this.addClass('on');
}, function () {
   $this.removeClass('on').siblings().slideUp(200);
});

score 0 · Accepted Answer

.siblings()目的のコンテナーを取得するために使用します。

// Bind the link to toggle the slide.
$("a.hover-btn").hover(

function (e) {
    // Prevent the default event.
    e.preventDefault();
    // Toggle the slide based on its current
    // visibility.
    // Get a reference to the container.
    var container = $(this).siblings(".container");
    if (container.is(":visible")) {

        // Hide - slide up.
        container.slideUp(200);
        $('a.hover-btn').addClass('off');
        $('a.hover-btn').removeClass('on');

    } else {

        // Show - slide down.
        container.slideDown(200);
        $('a.hover-btn').addClass('on');
        $('a.hover-btn').removeClass('off');

    }
});

デモ: http://jsfiddle.net/XtBPQ/2/

ただし、 mouseenterandを使用することをお勧めしますmouseleave。そのように制御することをお勧めします。

// Bind the link to toggle the slide.
$("a.hover-btn").on('mouseenter', function () {
    var $btn = $(this);

    // Get a reference to the container.
    var $container = $btn.siblings(".container");

    $container.slideDown(200);
    $btn.addClass('on');
    $btn.removeClass('off');
})
.on('mouseleave', function () {
    var $btn = $(this);

    // Get a reference to the container.
    var $container = $btn.siblings(".container");

    // Hide - slide up.
    $container.slideUp(200);
    $btn.addClass('off');
    $btn.removeClass('on');
});

デモ: http://jsfiddle.net/XtBPQ/6/

score 0 · Accepted Answer

等しいjQuery関数自体をバインド解除できないため（私の知る限り）、これでうまくいくはずです：

$('a.hover-btn').unbind('mouseenter').unbind('mouseleave');

これが行うことは、タグに置かれたネイティブバインディング (リスナー) jQuery を事実上アンバインドすることです。

一部のブラウザーでは上記のほうがうまく機能し、一部のブラウザーでは次のコードの方がうまく機能します。

$('a.hover-btn').unbind('mouseenter mouseleave');

あなたに最適なものを試してみてください。

幸運を！

score 0 · Accepted Answer

親 div に移動し、.container. を見つけます。

// Get a reference to the container.

// Bind the link to toggle the slide.
$("a.hover-btn" ).hover(
    function( e ){
        // Prevent the default event.
        e.preventDefault();
        // Toggle the slide based on its current
        // visibility.
        var current_container = $(this).parent('.sliderContent').children('.container');
        if (current_container.is( ":visible" )){

            // Hide - slide up.
           current_container.slideUp( 200 );
            $(this).addClass('off');
            $(this).removeClass('on');

        } else {

            // Show - slide down.
            current_container.slideDown( 200 );
            $(this).addClass('on');
            $(this).removeClass('off');

        }
    }
);

または代わりに

var current_container = $(this).parent('.sliderContent').children('.container');

あなたは他のポスターがしたことをすることができます

var current_container = $(this).siblings(".container");

デモ: http://jsfiddle.net/XtBPQ/4/

score 0 · Accepted Answer

編集O im to late xD

$("a.hover-btn").hover(

function (e) {
    // Prevent the default event.
    e.preventDefault();
    // Toggle the slide based on its current
    // visibility.
    // Get a reference to the container.
    var container = $(this).siblings(".container");
    if (container.is(":visible")) {

        // Hide - slide up.
        container.slideUp(200);
        $('a.hover-btn').addClass('off');
        $('a.hover-btn').removeClass('on');

    } else {

        // Show - slide down.
        container.slideDown(200);
        $('a.hover-btn').addClass('on');
        $('a.hover-btn').removeClass('off');

    }
});

var コンテナーはクラスコンテナー、すべてのコンテナーと同じであると Jquery に伝えました。var container = $(this).siblings(".container"); で作成します。コンテナーのみを選択することは、div ホバーと一致します。

jquery - 同じコードjqueryで個々の.hoverをどのように割り当てますか

5 に答える 5

フィドルをチェックアウト

Related

Reference