Question

我有这段代码：

<div class="nav navbar-nav" id="filters">
    <button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
    <button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
    <button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
    <button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
    <button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>

我想从div #filters中选择所有按钮，除了唯一一个#sort，使用jQuery的选择器。

目前我已尝试通过以下代码实现此目的。

$('#filters').not('#sort').each( function( i, buttonGroup ) {
     var $buttonGroup = $( buttonGroup );
     $buttonGroup.on( 'click', 'button:not("#sort")', function() {
         $buttonGroup.find('.active').removeClass('active');
         $( this ).addClass('active');
     });
});

你能帮助我吗？

非常感谢任何帮助。

Answer 1

使用$("#filters *").not("#sort")选择器。

请查看以下代码段以获取更多理解。

$("#filters button").on("click",function(){
  $("#filters *").not("#sort").removeClass('active');
  $(this).not("#sort").addClass('active');
});

.active{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav navbar-nav" id="filters">
  <button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
  <button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
  <button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
  <button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
  <button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>

Answer 2

在选择器中使用 .not() ，并使用 Child Selector (“parent > child”) < $('#filters > button') 查找按钮/ p>

您的问题和代码有点令人困惑但它表示您想要在点击按钮并从其他按钮中移除时应用active类按钮。

以下点击事件适用于all the buttons except #sort。

$('#filters > button').not($('#sort')).click(function(){
  $('#filters > button').removeClass('active');
  $(this).addClass('active');
});

$('#filters > button').not($('#sort')).click(function(){
  $('#filters > button').removeClass('active');
  $(this).addClass('active');
});

.active{
 background-color: red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    <div class="nav navbar-nav" id="filters">
                        <button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
                        <button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
                        <button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
                        <button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
                        <button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
                    </div>

Answer 3

你可以使用css：not selector这样：

$("#filters button:not('#sort')")

选择除jQuery -2之外的所有按钮

3 个答案: