需要切换/删除具有同级选择器的类
Need to switch/remove class with siblings selector
我有两个按钮,当我点击其中一个时,函数会添加"选定"的类,但如果我按下另一个按钮,这两个按钮会保持同一个类,我使用了兄弟选择器,但工作不正常,你能帮我吗?
$('.btn-switch-view').on('click', function() {
$(this).addClass('btn-switch-view-selected');
$('.btn-group').siblings('a.btn-switch-view-selected').removeClass('btn-switch-view-selected');
});
.btn-group .btn-default.btn-switch-view {
color: #b2b2b2;
}
.btn-group a.btn-default.btn-switch-view:hover,
a.btn-default.btn-switch-view-selected {
color: #1b4298!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<a href="#" id="grid" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-large" aria-hidden="true"></i>
</a>
<a href="#" id="list" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-list" aria-hidden="true"></i>
</a>
</div>
您已经在this
中有了锚点,现在以同级锚点为目标,并删除类
$('.btn-switch-view').on('click', function() {
$(this).addClass('btn-switch-view-selected')
.siblings()
.removeClass('btn-switch-view-selected');
});
.btn-group .btn-default.btn-switch-view {
color: #b2b2b2;
}
.btn-group a.btn-default.btn-switch-view:hover,
a.btn-default.btn-switch-view-selected {
color: #1b4298!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<a href="#" id="grid" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-large" aria-hidden="true">Button</i>
</a>
<a href="#" id="list" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-list" aria-hidden="true">Button</i>
</a>
</div>
$('.btn-group').siblings('a.btn-switch-view-selected')
应该是
$(this).siblings('a.btn-switch-view-selected')
因为您试图将目标锁定在.btn-switch-view
(单击的元素(的同级,而不是.btn-group
相关文章:
- 我们可以使用jquery删除css选择器吗
- Bootstrap日期选择器下拉列表未删除
- 如何使用d3.js选择器删除处理程序
- 如何在以下脚本中删除dom选择器中的链接
- 相同的选择器单击添加和删除
- 无法停止/删除/销毁日期计时器选择器函数 (jQuery)
- 从选择器中删除链接
- 追加到数据选择器的值,然后从中删除
- Jquery 日期选择器删除 onclick 和 onchange 并添加默认属性
- 如果我不删除事件处理程序'我不知道用于创建此处理程序的原始选择器
- 从jQuery选择器.html()中删除Ember.js脚本标记
- 使用jQuery删除类时,是否最好将该类包含在选择器中
- 如何从jQuery选择器返回的列表中删除元素
- :焦点伪选择器样式不会被删除,当一个新的选项卡打开,即使模糊事件被触发
- 从日期选择器中删除包含时间的字符串
- 需要切换/删除具有同级选择器的类
- Jquery selectbox删除所有选项,除了两个(选择器变量名)
- jquery.each函数检查另一个选择器并删除重复项
- 如何从引导日期时间选择器中删除AM/PM
- 在php foreach中使用jquery动态选择器删除单个图像