我想为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}}。我该如何解决这个问题?
答案 0 :(得分:1)
您的'clicks'
数据元素仅在您点击的元素上,而不在两个元素上。
因此,当您点击.rgstr
时,只会更新其数据,而不是.disable
。在第一次点击.disable
时,其clicks
为undefined
,因此第一个if
块已运行(就像您第一次点击.rgstr
时一样)
您需要将clicks
变量保存在两个元素都可以读取/写入相同值的位置。