jquery - 两个 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

您正在将点击监听器绑定(bind)到 .question 。您在具有该类的 div 内有一个具有该类的按钮。您的事件分派(dispatch)两次(每个对象一次)，因此切换被否定。您可以在控制台中看到它 - 所有日志条目都会加倍。

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

更改:

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

致:

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

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

$('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>