1

2 つのセレクターに対してトグル機能を実行したいと考えています。クラスを持つ要素と、セレクターである.rgstrクラスを持つ別の要素があります。.disable

これが私のコードです：

$(document).ready(function(){
    $('.rgstr, .disable').click(function() {
        var clicks = $(this).data('clicks');

        if (!clicks) {
            $('.loginpanel').animate({ right: "0"}, 300, function() {
                $('.lgnreg > div').stop().animate({right:"0"},1200,'easeOutExpo');
            });
            $('.disable').css("display","block");
        } 
        else {
            $('.loginpanel').animate({ right: "-300px" }, 250, 'easeInOutCirc', function() {
                $('.lgnreg > div').stop().animate({right:"-25px"},250,'easeInOutCirc');
            });
            $('.disable').css("display","none");
        }
        $(this).data("clicks", !clicks);
    });
});

HTML :

<div class="disable"></div>
<div class="rgstr">
    <a href="#">Login/Register</a >
</div>
<div class="loginpanel">
<div class="lgnreg">
    <div class="login">
        <form>
            <input type="text" name="lgnusername" id="lgnusername" value="Username" />
            <input type="text" name="lgnpassword" id="lgnpassword" value="Password" />
            <input type="submit" name="submit" id="submit" value="Login" />
        </form>
    </div>

    </div>
</div>

を.rgstrクリックする.loginpanelと開き、 をクリックする.disableと閉じます。今は動作しますが、2 回のクリックで済みます。初めてクリックする.rgstrと開きますが、閉じるには.loginpanel2回クリックする必要があり、次回も同じです。どうすればこれを修正できますか?.disable.loginpanel

4

1 に答える 1

1

データ要素は、両方の要素ではなく、クリックし'clicks'た要素のみにあります。

したがって、 をクリックすると.rgstr、 のデータではなく、そのデータのみが更新され.disableます。.disableが 1 回目にクリックされたときclicksはundefinedであるため、最初のifブロックが実行されます (最初に をクリックしたときと同様.rgstr)。

clicks両方の要素が同じ値を読み書きできる場所に変数を保存する必要があります。

于 2013-01-18T17:06:40.317 に答える