Javascript 如何使用单击事件切换元素中的文本

当用户单击我的

span

元素并显示文本“show more”时。我希望元素中的文本更改为“显示较少”

$（“div.fluid.examples span.fluid”）。单击（函数（e）{
this=$（this）；
d=$（this）.prevAll（“div.fluid.examples p.hiddenp”）.长度；
如果（d>0）{
此.text（“显示较少”）
}如果（d

您应该检查
可见的金额
：

d = $(this).prevAll("div.fluid.examples p.hiddenp:visible").length;

（您只需要添加
：visible
位）

然后，在您的if中：

if (d === 0) { // They're hidden      
   thhis.text("Show Less");
}
else if (d > 0) { // They're not hidden       
   thhis.text("Show More");
}

或者，代替if，您可以使用：

thhis.text (d === 0 ? "Show Less" : "Show More");

试试这个

 $("div.fluid.examples span.fluid").click(function (e) {
     thhis = $(this);

     d = $(this).prevAll("div.fluid.examples p.hiddenp").length;
     var $text = thhis.text();
     if (d > 0) {
         $text.indexOf('Show Less') > -1 ? thhis.text("Show More") 
                                         : thhis.text("Show Less");
     } else if (d < 0) {
         thhis.text("Show More")
     }
     $(this).prevAll(".hiddenp").fadeToggle(600);

 });

$（“div.fluid.examples span.fluid”）。单击（函数（e）{
thhis=$（本）；
d=$（this）.prevAll（“div.fluid.examples p.hiddenp”）.长度；
var$text=thhis.text（）；
如果（d>0）{
$text.indexOf（'Show Less'）>-1？此.text（“Show More”）
：该文本（“显示较少”）；
}else如果（d<0）{
此文本（“显示更多”）
}
美元（此）.prevAll（“.hiddenp”）.fadeToggle（600）；
});

为什么不按常规方式，在同一次单击中切换文本和元素

$("div.fluid.examples span.fluid").click(function() {
    $(this).text(function(_,txt) {
        return txt == 'Show Less' ? 'Show More' : 'Show Less';
    });
    $(this).prevAll(".hiddenp").fadeToggle(600);
});   


工作示例

您还可以使用三元运算符收紧代码：

 $("div.fluid.examples span.fluid").click(function(e) {
     var $this = $(this);
     $this.text($this.text() == "Show More" ? "Show Less":"Show More");

     $(this).prevAll(".hiddenp").fadeToggle(600);
}); 

我修正了你的一些问题。@CaryHartline干杯，有点匆忙。我也喜欢你的答案，如果我能接受两个答案，我当然也会接受你的答案。谢谢。这可能不是写的
$（this）.text（$（this.text（）==“少显示”？“多显示”：“少显示”）
而不是函数？@mplungjan-是的，它可以，但如果它应该是一个意见问题，我想。我知道我不是唯一一个这样想的人：）-我想你的更可读，但我没有看到“忽略索引”占位符before@mplungjan-这并不少见，有些人使用
i
或变量名作为索引，但下划线也是有效的，而且无论如何都不使用，所以为什么不呢。我注意到下划线版本一直都是如此（我认为是未定义的原因？）.很难选择要接受的答案，但你的答案胜出了，谢谢。
 $("div.fluid.examples span.fluid").click(function(e) {
     if($(this).text() == "Show More"){
        $(this).text("Show Less");
     }else{
        $(this).text("Show More");
     }

     $(this).prevAll(".hiddenp").fadeToggle(600);

});

 $("div.fluid.examples span.fluid").click(function(e) {
     var $this = $(this);
     $this.text($this.text() == "Show More" ? "Show Less":"Show More");

     $(this).prevAll(".hiddenp").fadeToggle(600);
});