两个 jQuery 切换不起作用

Question

谁能告诉我为什么这个愚蠢的代码不能在我的网站上运行？是我疯了，还是有冲突？

<div class="row faqbody question">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-12">
                <button class="question">
                    <h5>
                        Do I get to pick which chef makes my pie?
                        <i class="fa fa-caret-up"></i>
                    </h5>
                </button>                             
            </div>
        </div>                
        <div class="row answer">
            <div class="col-lg-12">
                <p>Nope....</p>
            </div>
        </div>
    </div>
</div>

$('.question').click( function() {
    console.log('Question Clicked');    

    if ($(this).find('.fa').hasClass('fa-caret-up')) {
        console.log('Has Fa-caret-up');
        $(this).find('.fa').removeClass('fa-caret-up');
        $(this).find('.fa').addClass('fa-caret-down');  
    }

    if ($(this).find('.fa').hasClass('fa-caret-down')) {
        console.log('Has Fa-caret-down');
        $(this).find('.fa').removeClass('fa-caret-down');
        $(this).find('.fa').addClass('fa-caret-up');    
    }   

    $(this).parent('div').parent('div').next('.answer').toggleClass('hidden');
});

答案显示没有问题，插入符号以如此时髦的方式编码的原因是因为以下不起作用：

$( this ).find('.fa').toggleClass('fa-caret-up fa-caret-down');

我以前从未见过这个。通常像这样简单的东西不是问题。

提前谢谢你，我希望这是一个简单的！

Answer 1

您正在将点击侦听器绑定到 .question。您有一个带有 class 的按钮，位于带有 class 的 div 中。您的事件分派两次（每个对象一次），因此切换被取消。您可以在控制台中看到它 - 您的所有日志条目都加倍了。

请参阅下面的代码片段，修复基本上只是让您的选择器更加明确：

变化：

$('.question').click(...);

收件人：

$('button.question').click(...)

PS... 这个片段在没有 FontAwesome 的情况下运行，所以我只是在你的 <i> 标签和一些样式中添加了一个 X 这样你就可以看到它发生变化并且 classes 被正确分配。

$('button.question').click( function() {
    console.log('Question Clicked');    
    $(this).find('.fa').toggleClass('fa-caret-up').toggleClass('fa-caret-down'); 
    $(this).parent('div').parent('div').next('.answer').toggleClass('hidden');
});

i.fa.fa-caret-up {
  color: red;
  }

i.fa.fa-caret-down {
  color: blue;
  }

.hidden {
  display:none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row faqbody question">
  <div class="col-lg-12">
    <div class="row">
      <div class="col-lg-12">
        <button class="question"><h5>Do I get to pick which chef makes my pie? <i class="fa fa-caret-up">X</i></h5></button>
      </div>
    </div>
    <div class="row answer hidden">
      <div class="col-lg-12">
        <p>Nope....</p>
      </div>
    </div>
  </div>
</div>

两个 jQuery 切换不起作用

Two jQuery toggles not working

jquery

toggleclass