jQuery slideToggle並更改文本

Question

我有一個簡單的常見問題部分，需要展開以顯示問題點擊答案，很簡單。我似乎無法使span（ -/+）正確更改。它要麼根本不工作，要麼全部改變，而不僅僅是問題中包含的那個。

dd{display:none;} 

$('.faq dt').on('click', function(){ 
    var span = $('.faq dt span'); 
    $(this).next('dd').slideToggle('fast'); 
    $(span).text($(span).text() == '[ + ]' ? '[ - ]' : "[ + ]"); 
}); 

<dl class="faq"> 
    <dt>this is question 1<span>[ + ]</span></dt> 
    <dd>this is answer 1</dd> 
    <dt>this is question 2<span>[ + ]</span></dt> 
    <dd>this is answer 2</dd> 
    <dt>this is question 3<span>[ + ]</span></dt> 
    <dd>this is answer 3</dd> 
</dl> 

fiddle

如何確定目標只有點擊元素中的跨度？

Answer 1

find()發現跨度dd

$(function(){ 
    $('.faq dt').click(function(){ 
     $(this).next('dd').slideToggle('fast').end() 
       .find('span').text(function(_,t) { 
      return t == '[ + ]' ? '[ - ]' : "[ + ]"; 
     }); 
    }); 
}); 

FIDDLE