Question

我有两个按钮，当我点击任何一个函数添加类“选中”但是如果我按下另一个按钮两个按钮保持相同的类，我使用了兄弟选择器但是没有正常工作，¿你可以帮帮我吗？

$('.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>

Answer 1

你已经拥有this中的锚点，现在定位兄弟锚点，并删除该类

＆＃13;

$('.btn-switch-view').on('click', function() {
  $(this).addClass('btn-switch-view-selected')
         .siblings()
         .removeClass('btn-switch-view-selected');
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

$('.btn-group').siblings('a.btn-switch-view-selected')

应该是

$(this).siblings('a.btn-switch-view-selected')

当你试图定位.btn-switch-view的兄弟姐妹（被点击的元素）而不是.btn-group

需要使用兄弟选择器切换/删除类

2 个答案: