如何在另一個跨度內更改跨度文本？

Question

我試圖做的是從「+」變爲一個可摺疊的列表「 - 」根據列表是否摺疊或展開和背部。我可以使用下面的語句進入文本：

$(this).children().eq(i).children('span')[0].firstChild.outerText; 

但我不知道如何更改值。 JQuery Guru可能會向我展示更優雅的解決方案。這是我的JSFiddle。

This answer是最接近的答案我能找到我的問題，但我不知道如何實現它，甚至如果有更好的辦法。

Answer 1

// Make your code clean and readable! 
 
// Don't target #test. Go directly for your "title/heading" elements ("buttons") 
 
$(".Collapsable").on("click", function() { 
 

 
    // Who is my +/- icon element? 
 
    var $ico = $(this).find(".symbol"); 
 
    // Traverse up to LI and than back down to find my UL sub list: 
 
    var $subList = $(this).closest("li").find("> ul"); 
 
    // Realize the current collapsed/expanded state 
 
    var isSubListHidden = $subList.is(":hidden"); 
 

 
    // OK, time to rock! 
 
    // Change teh text +/- 
 
    $ico.text(isSubListHidden ? "-" : "+"); 
 
    
 
    // Toggle sub lists: 
 
    $subList.stop().slideToggle(); 
 

 
});

.hideUnorderedList { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul id="test"> 
 
    <li id="first"> 
 
     <span class="Collapsable"><span class="symbol">+</span>First One</span> 
 
     <ul id="myfirstlist" class="hideUnorderedList"> 
 
     <li>Something to do</li> 
 
     <li>Something else to do</li> 
 
     </ul> 
 
    </li> 
 
    <li id="second"> 
 
     <span class="Collapsable"><span class="symbol">+</span>Second One</span> 
 
     <ul id="mysecondlist" class="hideUnorderedList"> 
 
     <li>Second thing to do</li> 
 
     <li>Second other thing to do</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

這可以簡化不少。而不是試圖去匹配指數，只是使用jQuery的find()方式來指定後裔：

$('#test > li').click(function() { 
 
    var $symbol = $(this).find('.symbol'); 
 
    $(this).find('ul').slideToggle('fast'); 
 
    if ($symbol.text() === ' +') { 
 
    $symbol.text(' -'); 
 
    } else { 
 
    $symbol.text(' +'); 
 
    } 
 
});

.hideUnorderedList { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul id="test"> 
 
    <li id="first"> 
 
     <span class="Collapsable"><span class="symbol"> +</span>First One</span> 
 
     <ul id="myfirstlist" class="hideUnorderedList"> 
 
     <li>Something to do</li> 
 
     <li>Something else to do</li> 
 
     </ul> 
 
    </li> 
 
    <li id="second"> 
 
     <span class="Collapsable"><span class="symbol"> +</span>Second One</span> 
 
     <ul id="mysecondlist" class="hideUnorderedList"> 
 
     <li>Second thing to do</li> 
 
     <li>Second other thing to do</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>