jQuery的 - 所示，當隱藏更改時顯示的文本

Question

我有一個按鈕，上有文字...它的格式，像這樣

<a href="" id="refl" class="button"><span>VIEW ALL CASES</span></a> 

我有一些jQuery的那個切換一個div當「REFL」的時刻被點擊。

當div被隱藏時，如何將文本查看所有案例改爲「查看所有案例」，但當div顯示時顯示「CLOSE ALL CASES」？

乾杯，

Answer 1

$('.button').click(function() { 
    var span = $(this).find('span') 
    span.html(span.html() == 'CLOSE ALL CASES' ? 'VIEW ALL CASES' : 'CLOSE ALL CASES'); 
}); 

我選擇使用的.html（）代替的.text（），因爲你可以有你的跨度內的其他HTML標記。

Answer 2

$('a#refl').click(function() { 
    //select elements 
    var $span = $('span', this); 
    var $div = $('div#theOneYouAreHidding'); //this is div you hide/show 

    //check text to see if we need to hide or show 
    if($span.text() == 'VIEW ALL CASES') 
    { 
     $div.show(); 
     $span.text('CLOSE ALL CASES'); 
    } 
    else 
    { 
     $div.hide(); 
     $span.text('VIEW ALL CASES'); 
    } 
}); 

Answer 3

$('#refl').click(function() { 

    $(this).text(function() { 
     return $('#your-element:visible').length ? 'CLOSE ALL CASES' : 'SHOW ALL CASES'; 
    }); 

    // hide code 

}); 

Answer 4

$('a#ref1').toggle(
    function() { 
    $('div').show(); // div selector here 
    $(this).find('span').html('CLOSE ALL CASES'); 
    }, 
    function() { 
    $('div').hide(); // div selector here 
    $(this).find('span').html('VIEW ALL CASES'); 
    }, 
); 

Answer 5

$("#ref1").click(function(){ 
    var div = $("#theDivToToggle"); 
    div.toggle(); 
    $(this).find("span").text(div.is(":visible") ? "CLOSE ALL CASES" : "SHOW ALL CASES"); 
});