Как переключить текст в элементе с помощью события click

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

Почему бы просто не сделать это обычным способом, переключив текст и элементы на один и тот же клик?

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

Here's a working jsFiddle.

Вы должны проверять количество, которые являются visible:

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

(Вы просто нужно добавить был :visible бит)

Тогда , в вашем i е:

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

Или, вместо того, чтобы, если вы могли бы использовать:

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

jsFiddle here.

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