Question

我有一个带有<i>标记元素的父按钮作为子项，如果我单击按钮类，它们将触发父项和子项的切换类，因此它将条件设置为活动和非活动按钮if我将一个按钮移动到另一个按钮，问题是当我单击活动按钮时我的子元素切换类不起作用，检查图标不会消失。这是我的代码jsfiddle

＆＃13;

$(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');
  })
})

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

问题是你在你的小提琴中既没有加载jQuery也没有加载字体，这里有效：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

看起来你错过了包括定义$的jQuery。在将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 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何在jquery中切换子元素

4 个答案: