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 demo

您应该使用：.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>

slideToggle：+符号未更新为 -

3 个答案:

jsBin demo