如何僅使用javascript選擇一個li元素？

Question

這應該是一個簡單的修復，但我只是不能把我的頭圍繞javascript選擇器。我有一個h3 li元素列表，每個元素都包含點擊時顯示的內容。點擊時，我想要一個切換箭頭從上到下改變。但是，下面的JS代碼會發生在所有li元素上，包括沒有顯示摺疊內容的元素。我怎樣才能解決這個問題？

$(document).ready(function() { 

$('#toggle-view li').click(function() { 
    var text = $(this).children('div.panel'); 
    if (text.is(':hidden')) { 
     text.slideDown('200'); 
     $("h3 .fa-caret-up").removeClass("fa-caret-up").addClass("fa-caret-down"); 
    } else { 
     text.slideUp('200'); 
     $("h3 .fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-up"); 
    } 

}); 
}); 

這裏是如果你需要它的HTML：

<ul class="services-ul facebook-ul" id="toggle-view"> 
     <li> 
     <h3><i class="fa fa-check"></i>Header 1<i class="fa fa-caret-up"></i></h3> 
       <span>+</span> 
       <div class="panel"> 
        <p>dummy text...</p> 
       </div> 
     </li> 
     <li> 
     <h3><i class="fa fa-check"></i>Header 2<i class="fa fa-caret-up"></i></h3> 
       <span>+</span> 
       <div class="panel"> 
        <p>dummy text...</p> 
       </div> 
     </li> 
     <li> 
     <h3><i class="fa fa-check"></i>Header 3<i class="fa fa-caret-up"></i></h3> 
       <span>+</span> 
       <div class="panel"> 
        <p>dummy text...</p> 
       </div> 
     </li> 
     <li> 
     <h3><i class="fa fa-check"></i>Header 4<i class="fa fa-caret-up"></i></h3> 
       <span>+</span> 
       <div class="panel"> 
        <p>dummy text...</p> 
       </div> 
     </li> 
    </ul> 

Answer 1

你需要指定相對元素this（這你click事件中，其已經被點擊了li元素）。

在jQuery選擇（$(this)）簡單包裝this，然後用jQuery's find() method找到它所包含的元素：

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

和：

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