javascript - slideToggle：+ 符号未更新为 -

Question

如何解决以下问题？

1)+符号未正确更新为“-”，反之亦然；

2）第一次My Settings点击标志后测试消失。+

$(function(){
    $('.myToggler').click(function(e){
        $(this).next().slideToggle();
        var sign=$(this).children(':first');
        sign.text(sign.text() == '+'?'+':'-');
        e.preventDefault;
    });
});

<div class="myToggler">
    <h3><span class="togglerSign">+</span>
    My Settings</h3>
</div>
<div class="mySlider">
</div>

Answer 1

jsBin 演示

• 您应该使用以下方法查找元素：.find()
• 并使用：sign.text() == '+'?'-':'+'

刷新关于三元运算符的知识：

[statement]  ?  [if is true]   :  [if is false] ;
sign is '+'  ?  YES?set to'-'  :  NO?set to'+'  ;

jQuery：

$(function(){
    $('.myToggler').click(function(e){
        $(this).next().slideToggle();
        var sign=$(this).find('span');
        sign.text(sign.text() == '+'?'-':'+');
        e.preventDefault;
    });
});

Answer 2

var sign=$(this).children(':first');

应该

var sign=$(this).children('span:first');

和

sign.text(sign.text() == '+'?'+':'-');

应该

sign.text(sign.text() == '+'?'-':'+');

Answer 3

有很多解决方案可以做到这一点。你也可以试试这个：

$(function(){
    $('.myToggler').click(function(e){
        $(this).next().slideToggle();
        sign = $('.'+this.className+' span:first-child');
        sign.text((sign.text() == "+") ? "-" : "+");
        e.preventDefault;
    });
});​

<div class="myToggler">
    <h3><span class="togglerSign">+</span>My Settings</h3>
</div>
<div class="mySlider"></div>