[英]Jquery switch class on click event
我有下面的例子:
<div class="filtrer">
<a class="bold">Url 1</a>
<a>Url 2</a>
</div>
第一个网址处于活动状态,第二个网址处于非活动状态,选中了粗体。 应该只允许我按Url 2,然后我将大胆的班级切换到Url 2。
我已经尝试过但没有用的是:
$('.filtrer a').filter(':not(.bold)').on('click', function(){
var current = $('.filtrer a').filter(':not(.bold)');
var standby = $('.filtrer a.bold');
current.addClass('bold');
standby.removeClass('bold');
})
有人知道为什么这不起作用吗? 还是有优化的解决方案? 谢谢
您正在处理动态元素选择器,因此需要使用基于委托的事件处理程序
var $as = $('.filter a');
$('.filter').on('click', 'a:not(.bold)', function () {
var current = $as.filter(':not(.bold)');
var standby = $as.filter('.bold');
current.addClass('bold');
standby.removeClass('bold');
})
演示: 小提琴
可以写成
var $as = $('.filter a');
$('.filter').on('click', 'a:not(.bold)', function () {
$as.toggleClass('bold');
})
演示: 小提琴
$('.filter').on('click','a:not(.bold)',function(){
$(this).siblings().add(this).toggleClass('bold');
});
还是没有jQuery:
<div class="filter">
<input type="radio" name="url" id="url1"><label for="url1">url1</label>
<input type="radio" name="url" id="url2"><label for="url2">url2</label>
</div>
.filter input[type=radio]{
display:none;
}
.filter input[type=radio]:checked + label{
font-weight:bold;
}
您拼错了“过滤器”,请在代码或HTML中对其进行更改。
$('.filtrer').on('click',' a:not(.bold)', function(){
$('.filtrer a.bold').removeClass('bold');;
$(this).addClass('bold');
})
就像是 :
$('.filter a').click(function() {
$('.filter a').removeClass('bold');
$(this).addClass('bold');
});
?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.