0

複数を実行するようにフィドルを変更しましたが、複数でエラーが発生しました... リンク 1 をクリックすると、div 1 と 2 が影響を受けます。

リンク 2 をクリックすると、div 2 のみが影響を受けます。

ここで何が問題になる可能性がありますか？

http://jsfiddle.net/bluey/zsMaE/3/

  function deselect() {
        $(".pop").slideFadeToggle(function() { 
            $("#contact").removeClass("selected");
        });    
    }

    $(function() {
        $("#contact").live('click', function() {
            if($(this).hasClass("selected")) {
                deselect();               
            } else {
                $(this).addClass("selected");
                $(".pop").slideFadeToggle(function() { 

                });
            }
            return false;
        });

        $(".close").live('click', function() {
            deselect();
            return false;
        });
    });

    $.fn.slideFadeToggle = function(easing, callback) {
        return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
    };



    function deselect() {
        $(".pop2").slideFadeToggle(function() { 
            $("#contact2").removeClass("selected");
        });    
    }

    $(function() {
        $("#contact2").live('click', function() {
            if($(this).hasClass("selected")) {
                deselect();               
            } else {
                $(this).addClass("selected");
                $(".pop2").slideFadeToggle(function() { 

                });
            }
            return false;
        });

        $(".close").live('click', function() {
            deselect();
            return false;
        });
    });

    $.fn.slideFadeToggle = function(easing, callback) {
        return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
    };
4

2 に答える 2

0

「deselect()」関数を 2 回定義しました。2 番目の名前を「deselect2」に変更することもできますが、これを行うより良い方法があります。

リンクに一意の ID を与える代わりに、同じクラス (「連絡先」など) を与えます。その後、同じクリック イベント ハンドラーを簡単に割り当てることができます。次に、「deselect()」関数を書き直して、リンクをパラメーターとして受け取ります。"messagepop" div をリンクに関連付けるには、それらに一意の ID を与えてから、リンクの href を div の ID に設定します。

HTML:

<div class="messagepop" id="pop1">ANYTHING HERE 1</div>
<div class="messagepop" id="pop2">ANYTHING HERE 2</div>
<a href="#pop1" class="contact">Contact Us 1</a>
<a href="#pop2" class="contact">Contact Us 2</a>

JavaScript:

function select($link) {
    $link.addClass('selected');
    $($link.attr('href')).slideFadeToggle(function () {});
}

function deselect($link) {
    $($link.attr('href')).slideFadeToggle(function () {
        $link.removeClass('selected');
    });
}

$('.contact').click(function () {
    var $link = $(this);
    if ($link.hasClass('selected')) {
        deselect($link);
    } else {
        select($link);
    }
    return false;
});

jsfiddle

コメントの質問の更新

一度に の 1 つだけを表示したい場合は、どれが<div>表示されているかを追跡し、それを非表示にしてから別の を表示することができますが、1 つを表示する前にすべてを非表示にする方が簡単です。すべての<div>s には「messagepop」クラスがあるため、すべてを選択するのは簡単です。

function select($link) {
    $link.addClass('selected');
    $('.messagepop:visible').slideFadeToggle(function () {});
    $($link.attr('href')).slideFadeToggle(function () {});
}

注:でそれらを非表示にする場合は、.hide()おそらく'.messagepop'セレクターに使用してすべてを非表示にしますが、それらを.slideFadeToggle()切り替えるので、切り替え'.messagepop:visible'を表示されているものだけに制限することにしました。

于 2013-04-15T04:49:41.250 に答える
0

あなたは2回 deselect を宣言しています！明らかに、2番目は最初のものをオーバーライドします

プラグインをする

$.fn.extend({deselect : function () {$(this).removeClass('deselect')} });

次に、2つの連絡先を一度にバインドして（クラスをそれらに配置して）使用します$(this)

于 2013-04-15T04:44:49.087 に答える