Question

当用户点击我的span元素时，文字“显示更多”。我希望元素中的文本更改为“Show Less”。

$("div.fluid.examples span.fluid").click(function(e) {
    this = $(this);
    d = $(this).prevAll("div.fluid.examples p.hiddenp").length;
    if (d>0) {
        this.text("Show Less")
    } else if (d<0) {
        this.text("Show More")
    }
    $(this).prevAll(".hiddenp").fadeToggle(600);
});

jsfiddle

Answer 1

Here's a working jsFiddle.

您应该检查visible：

的金额

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");

jsFiddle here.

Answer 2

为什么不通过在同一次点击中切换文本和元素来以常规方式执行此操作？

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

FIDDLE

Answer 3

试试这个

 $("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);

 });

<强> Check Fiddle

Answer 4

 $("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);

});

工作示例 http://jsfiddle.net/nUrSs/5/

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

 $("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);
});

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

4 个答案: