jQuery代碼只執行過的第一個語句

Question

我有下面的HTML代碼

<div class="testimonial closed"> 

    <p class="author">Author name</p> 

    <p class="quote">This is a quote</p> 

</div> 

和我有以下jQuery代碼：

jQuery(document).ready(function($){ 

    if ($('.testimonial').hasClass('closed')) { 

     $("p.author").click(function() { 

      var parent = $(this).parent(); 
      window.console.log("Opened with author name"); 
      $(parent).addClass("opened").removeClass("closed"); 

     }); 

    } else if ($('.testimonial').hasClass('opened')) { 

     $("p.author").click(function() { 

      var parent = $(this).parent(); 
      window.console.log("Closed with author name"); 
      $(parent).addClass("closed").removeClass("opened"); 

     }); 

    } 

}); 

我的問題是代碼的第二部分從未得到執行。

我添加了一些輸出到控制檯，並可以看到代碼的第二部分從未執行，因爲我總是顯示消息'用作者姓名打開'，無論我點擊帶有該類的段落多少次的作者。

任何想法，爲什麼會發生這種情況？

難道是因爲在第一次點擊中應用的新類「打開」在某種程度上在'else if'語句中不可用嗎？如果不是，那麼我怎麼才能認識到班級已經從「關閉」變爲「打開」？

感謝您的時間和事先的幫助。

Answer 1

問題是因爲您只在加載時運行代碼，因此.opened元素的click()處理程序從不應用。相反，使用單個處理器並切換父元素上的類。試試這個：

$("p.author").click(function() { 
    $(this).closest('.testimonial').toggleClass("opened closed"); 
}); 

Example fiddle

Answer 2

你告訴代碼在頁面加載運行，並在HTML總是已經關閉的電話。因此，第一句話總是如此。它永遠不會再運行，所以永遠不會達到其他聲明。將<div class="testimonial closed">更改爲<div class="testimonial opened">，另一個將始終發生。你必須檢查點擊事件中的條件。

我認爲這將得到你正在尋找的東西。

jQuery(document).ready(function($){ 
    $("p.author").click(function() { 
     var parent = $(this).parent(); 
     $(parent).toggleClass("opened closed"); 
    }); 
});