Два 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. У вас есть кнопка с этим классом внутри div с этим классом. Ваше событие отправляется дважды (один раз из каждого объекта), поэтому переключатель переключается. Вы можете увидеть его в консоли - все записи в журнале удваиваются.

Смотрите ниже фрагмент кода, исправление в основном просто быть более явным с селектором:

Изменение:

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

To:

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