如何切換jquery中的children元素

Question

我有父項按鈕，其中<i>標記元素爲子項，也就是說，如果我點擊按鈕類，它們將觸發父類和子項的切換類，因此它將條件設置爲活動狀態，非活動按鈕，如果我將一個按鈕移動到另一個，問題是我的切換類的子元素不工作，當我點擊它自己的活動按鈕時，檢查圖標不會消失。這裏是我的代碼jsfiddle

$(document).ready(function(){ 
 
    $('.button').on("click", function() { 
 
    $('.price-filter-active').not(this).removeClass('price-filter-active'); 
 
    $('.fa').removeClass('fa-check'); 
 

 
    $(this).toggleClass('price-filter-active'); 
 
    $(this).find("i").toggleClass('fa-check'); 
 
    }) 
 
})

.price-filter-container { 
 
    width: 1190px; 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
    margin-top: 100px; 
 
} 
 
.price-filter-active { 
 
    background: #42B549; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="price-filter-container"> 
 
    <div class="row-fluid"> 
 
     <button class="span2 button"> 
 
      1 
 
      <i class="fa" aria-hidden="true"></i> 
 
     </button> 
 

 
     <button class="span2 button"> 
 
      2 
 
      <i class="fa" aria-hidden="true"></i> 
 
     </button> 
 

 
     <button class="span2 button"> 
 
      3 
 
      <i class="fa" aria-hidden="true"></i> 
 
     </button> 
 

 
     <button class="span2 button"> 
 
      4 
 
      <i class="fa" aria-hidden="true"></i> 
 
     </button> 
 
    </div> 
 
</div>

Answer 1

$('.button').on("click", function() { 
 

 
    $('.price-filter-active').not(this).find('i').removeClass('fa-check'); 
 
    $('.price-filter-active').not(this).removeClass('price-filter-active'); 
 
    $(this).toggleClass('price-filter-active'); 
 
    $(this).find("i").toggleClass('fa-check'); 
 
    
 
})

.price-filter-container { 
 
    width: 1190px; 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
    margin-top: 100px; 
 
} 
 
.price-filter-active { 
 
    background: #42B549; 
 
    color: white; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="price-filter-container"> 
 
    <div class="row-fluid"> 
 
     <button class="span2 button"> 
 
      1 
 
      <i class="fa" aria-hidden="true"></i> 
 
     </button> 
 

 
     <button class="span2 button"> 
 
      2 
 
      <i class="fa" aria-hidden="true"></i> 
 
     </button> 
 

 
     <button class="span2 button"> 
 
      3 
 
      <i class="fa" aria-hidden="true"></i> 
 
     </button> 
 

 
     <button class="span2 button"> 
 
      4 
 
      <i class="fa" aria-hidden="true"></i> 
 
     </button> 
 
    </div> 
 
</div>

Answer 2

的問題是，你不裝也不在你的提琴的jQuery也不字體真棒，這裏是它的工作：

$('.button').on("click", function() { 
 
    $('.price-filter-active').not(this).removeClass('price-filter-active'); 
 
    $('.fa').not($(this).find('.fa')).removeClass('fa-check'); 
 
    $(this).toggleClass('price-filter-active'); 
 
    $(this).find("i").toggleClass('fa-check'); 
 
})

.price-filter-container { 
 
    width: 1190px; 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
    margin-top: 100px; 
 
} 
 
.price-filter-active { 
 
    background: #42B549; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div class="price-filter-container"> 
 
    <div class="row-fluid"> 
 
    <button class="span2 button"> 
 
     1 
 
     <i class="fa" aria-hidden="true"></i> 
 
    </button> 
 

 
    <button class="span2 button"> 
 
     2 
 
     <i class="fa" aria-hidden="true"></i> 
 
    </button> 
 

 
    <button class="span2 button"> 
 
     3 
 
     <i class="fa" aria-hidden="true"></i> 
 
    </button> 
 

 
    <button class="span2 button"> 
 
     4 
 
     <i class="fa" aria-hidden="true"></i> 
 
    </button> 
 
    </div> 
 
</div>

Answer 3

看起來你缺少包括jQuery，wh ich定義$。在將jQuery和fontawesome庫包含到你的小提琴後，事情似乎正在發揮作用。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

https://jsfiddle.net/hggk6348/3/

Answer 4

變化這一行$('.fa').removeClass('fa-check'); 到 $('.price-filter-active').not(this).find("i").removeClass('fa-check');

$(document).ready(function(){ 
 
    $('.button').on("click", function() { 
 
    
 
    $('.price-filter-active').not(this).removeClass('price-filter-active'); 
 
    $('.price-filter-active').not(this).find("i").removeClass('fa-check'); 
 

 
    $(this).toggleClass('price-filter-active'); 
 
    $(this).find("i").toggleClass('fa-check'); 
 
    }) 
 
})

.price-filter-container { 
 
    width: 1190px; 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
    margin-top: 100px; 
 
} 
 
.price-filter-active { 
 
    background: #42B549; 
 
    color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="price-filter-container"> 
 
    <div class="row-fluid"> 
 
     <button class="span2 button"> 
 
      1 
 
      <i class="fa" aria-hidden="true"></i> 
 
     </button> 
 

 
     <button class="span2 button"> 
 
      2 
 
      <i class="fa" aria-hidden="true"></i> 
 
     </button> 
 

 
     <button class="span2 button"> 
 
      3 
 
      <i class="fa" aria-hidden="true"></i> 
 
     </button> 
 

 
     <button class="span2 button"> 
 
      4 
 
      <i class="fa" aria-hidden="true"></i> 
 
     </button> 
 
    </div> 
 
</div>