Question

我想为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}}。我该如何解决这个问题？

Answer 1

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

因此，当您点击.rgstr时，只会更新其数据，而不是.disable。在第一次点击.disable时，其clicks为undefined，因此第一个if块已运行（就像您第一次点击.rgstr时一样）

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

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

1 个答案: