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

Question

当用户单击span带有“显示更多”文本的元素时。我希望元素内的文本更改为“少显示”。

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

这是一个工作的jsFiddle。

您应该检查以下金额visible：

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

（你只需要添加:visible一点）

然后，在你的如果：

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在这里。

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

小提琴

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

 });

检查小提琴

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