Jquery 单击链接时切换文本

我有下面的代码将div（称为

#extra

）切换到视图中：

$('#more').click(function() {
    $('#extra').slideToggle('fast');
    return false;
});

我的单击功能是此链接：

<a href="#" id="more">More about us</a>

当

#extra

div可见时，如何将“更多关于我们”文本更改为“更少关于我们”？当单击同一链接以隐藏div时，我希望该链接的文本变回“更多关于我们的信息”。

只需切换文本

$('#more').click(function() {
    $('#extra').slideToggle('fast');
    $('#more').text(function(_,txt) {
        var ret='';

        if ( txt == 'More about us' ) {
           ret = 'Less about us';
           $(this).css('background','url(link/to/image1.png)');
        }else{
           ret = 'More about us';
           $(this).css('background','url(link/to/image2.png)');
        }
        return ret;
    });
    return false;
});

试试这个

$('#more').click(function() {
    var more = $(this);
    $('#extra').slideToggle('fast', function(){
        more.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
    });
    return false;
});

使用以下代码：

$('#more').click(function() {
    jQuery(this).text('less about us');
    if($('#extra').is(':visible')){
          jQuery(this).text('Less about us');
    }else{
          jQuery(this).text('More about us');
    }
    $('#extra').slideToggle('fast');
    return false;
});

---

这是演示：

是的，因为Dinesh的解决方案可能是最有效的 在jQuery中，对于hure

$（文档）.ready（函数（）{
$（“#更多”）。单击（函数（）{
var s=$（本）；
$（“#额外”）.slideToggle（'fast'，function（）{
s、 html（s.text（）=='More..'？'Less..'：'More..'）；
});
返回false；
});
});
#wrapp{
高度：38vh；
宽度：40vw；
保证金：50px 50px；
左：10%；
背景颜色：蓝色；
位置：绝对位置；
}
#wrapp#更多{
显示：内联块；
填充物：5px；
背景：黄色；
}  
#额外的{
高度：100px；
宽度：250px；
位置：相对位置；
保证金：1.2vh自动；
}
#额外p{
位置：相对位置；
颜色：红色；
文本对齐：居中；
垂直对齐：居中；
填充顶部：3.6vh；
字号：2.5em；
字体大小：粗体；
}

文件
标题
什么是…


$（文档）.ready（函数（）{
$（“#更多”）。单击（函数（）{
var s=$（本）；
$（“#额外”）.slideToggle（'fast'，function（）{
s、 html（s.text（）=='More..'？'Less..'：'More..'）；
});
返回false；
});
});
#wrapp{
高度：38vh；
宽度：40vw；
保证金：50px 50px；
左：10%；
背景颜色：蓝色；
位置：绝对位置；
}
#wrapp#更多{
显示：内联块；
填充物：5px；
背景：黄色；
}  
#额外的{
高度：100px；
宽度：250px；
位置：相对位置；
保证金：1.2vh自动；
}
#额外p{
位置：相对位置；
颜色：红色；
文本对齐：居中；
垂直对齐：居中；
填充顶部：3.6vh；
字号：2.5em；
字体大小：粗体；
}

文件
标题
什么是…

实际上，我建议使用jquery只切换类名，并让css切换文本：


$（'.btn'）。单击（函数（）{
$（this.toggleClass（'active'）；
});
.btn:：之前{
内容：“表演”；
}
.btn.active:：之前{
内容：“隐藏”；
}