如何在另一个跨度内更改跨度文本？

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>