[英]toggle elements jquery
我有一个三a
在页面上的标签。 用户只能“选择”一个。 标记:
<div class="fl_near">
<span class="title">title</span>
<p>
<a id="filter_today" class="first_tb" style="display: block">
<span>text1</span>
</a>
<a id="filter_tomorrow">
<span>text2</span>
</a>
<a id="filter_afterTomorrow" class="last_tb selected" style="display: block">
<span>text3</span>
</a>
</p>
</div>
JS代码:
$('.fl_near').find('a:not(.selected)').click(function () {
alert('1');
$('.fl_near').find('a').removeClass('selected');
$(this).addClass('selected');
});
此代码无法正常工作。 如果我选择第一个或第二个标签,则所有OK-样式都会切换,但无论如何都会显示警报。 如果我选择第一个,则不能选择最后一个。
问题出在哪里,为什么?
谢谢。
因为您没有将点击处理程序绑定到最后一个元素。
尝试
$('.fl_near a').click(function () {
$(this).addClass('selected').siblings().removeClass('selected');
});
find
过滤器仅运行一次-它不会监听连续的点击。 为此,请使用事件委托-这样,在发生点击时(而不是当前)绑定事件时,将应用过滤器。
$('.fl_near').on('click', 'a:not(.selected)', function (evt) {
alert(1);
$(this).addClass('selected').siblings('a').removeClass('selected');
});
另请注意,我已经简化了添加/删除类行。
现在,您没有将click事件绑定到从开始选择的链接。
我会改变:
$('.fl_near').find('a:not(.selected)').click(function () {
至
$('.fl_near a').click(function () {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.