jQuery slideToggle并更改文本

Question

我有一个简单的常见问题解答部分需要扩展以显示点击问题的答案，这很容易。我似乎无法正确地改变跨度（ - / +）。它要么根本不起作用，要么立刻改变所有这些，而不仅仅是问题中包含的那个。

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