javascript - 如何在jquery中切换子元素

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>