如何使用單擊事件切換元素中的文本

當用戶使用文本「顯示更多」單擊我的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

來源

2013-06-02 user1119742

爲什麼不通過常規方式來完成，通過在同一次點擊中切換文本和元素？

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

來源

2013-06-02 20:59:39 adeneo

啊，*理智* ... +1 –

難道這不會被寫入'$（this）.text（$（this）.text（）==「Show Less」？「顯示更多」：「顯示更少」）'而不是函數？ – mplungjan

@mplungjan - 是的它可以，但如果它應該是一個意見的問題，我猜。 – adeneo

Here's a working jsFiddle.

你應該檢查哪些visible量：

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

（你只需要添加是:visible位）

然後，在你的我F：

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.

來源

2013-06-02 20:57:55 lifetimes

我在你的[固定的幾件事情的jsfiddle]（http://jsfiddle.net/nUrSs/6/）。 – Cary

@CaryHartline乾杯，是一個匆忙的努力。 – lifetimes

我喜歡你的答案，如果我能接受2個答案，我一定會接受你的答覆，謝謝。 – user1119742

試試這個

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

來源

2013-06-02 20:58:33

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

來源

2013-06-02 21:01:16

如何使用單擊事件切換元素中的文本

回答

相關問題