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