javascript - 试图替换字符串中的最后一个字符，而不是字符串重复

Question

这是一个 JSBin：http: //jsbin.com/ofusec/2/

当您打开 DIV（自定义或个性化）时，该函数会正常运行，截断“+”并替换为“-”符号，但是当用户关闭 DIV 时，字符串会被复制并放入。

我希望结尾的行为与开头相同（截断并替换最后一个字符）

这是代码：

HTML：

<div id="customize" class="leftDiv">
    <span class="smallTitle"  onclick="toggle_expand('customizePort');">Customize Portfolio &nbsp;&nbsp;&nbsp;&nbsp; +</span><br />
    <div class="leftDivContent" id="customizePort">
    LAYOUT:<BR />
    NAVIGATION:<BR />
    BACKGROUND COLOR:<BR />
    FONT COLOR:<BR />
    </div>
</div>

<div id="personalize" class="leftDiv">
    <span class="smallTitle" onclick="toggle_expand('personalizePort');">Personalize Portfolio &nbsp;&nbsp; +</span><br />
    <div class="leftDivContent" id="personalizePort">
        HEADER IMAGE:<BR />
        ARTIST STATEMENT:<br />
        CONTACT INFORMATION:<br />
    </div>
</div>

JAVASCRIPT：

function toggle_expand(id){
    var e = document.getElementById(id);
    var text = $(e).siblings().text();
    if( $(e).css('display') === 'none' ){
        $(e).slideToggle('fast', function(){
            var newText = text.replace("+","-");
            $(e).siblings().text( newText );
        });
    } else {
        $(e).slideToggle('fast', function(){
            var newText = text.replace("-","+");
            $(e).siblings().text( newText );
        });
    }
}

Answer 1

这似乎具有您描述的效果：

function toggle_expand(id){
    var e = document.getElementById(id);
    var text = $(e).siblings("span").text();
    if( $(e).css('display') === 'none' ){
        $(e).slideToggle('fast', function(){
            var newText = $(e).siblings().text( text.slice(0, -1)+"-" );
        });
    } else {
        $(e).slideToggle('fast', function(){
            text = $(e).siblings("span").text( text.slice(0, -1)+"+" );
        });
    }
}

Answer 2

您的siblings选择器缺乏特异性。幽默的<br>是，它错误地添加了相同的文本，但在显示下拉 div 时它最初是模糊的。

function toggle_expand(id) {
    var e = document.getElementById(id);
    var $title = $(e).siblings(".smallTitle");
    var text = $title.text();

参考$title而不是$(e).siblings("span")在函数的其余部分。

Answer 3

小regex爱呢：

function toggle_expand(id){
    var e = document.getElementById(id);
    var text = $(e).siblings("span").text();
    if( $(e).css('display') === 'none' ){
        $(e).slideToggle('fast', function(){
            var newText = $(e).siblings().text( text.replace(/\+/,'-'));
        });
    } else {
        $(e).slideToggle('fast', function(){
            text = $(e).siblings("span").text( text.replace(/-/,'+'));
        });
    }
}