为什么我的2个选择器的点击功能需要2次点击?

时间:2013-01-18 17:00:47

标签: jquery click toggle

我想为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时会.loginpanel被打开,但我必须在.disable点击两次才能关闭.loginpanel,然后再次点击{{1}}。我该如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

您的'clicks'数据元素仅在您点击的元素上,而不在两个元素上。

因此,当您点击.rgstr时,只会更新其数据,而不是.disable。在第一次点击.disable时,其clicksundefined,因此第一个if块已运行(就像您第一次点击.rgstr时一样)

您需要将clicks变量保存在两个元素都可以读取/写入相同值的位置。