I have a button that has text on it ... its formatted like so
<a href="" id="refl" class="button"><span>VIEW ALL CASES</span></a>
I have some jQuery at the moment that toggles a div when "refl" is clicked.
How would i ch开发者_开发知识库ange the text VIEW ALL CASES to say "VIEW ALL CASES" when the div is hidden, but display "CLOSE ALL CASES" when the div is showing?
Cheers,
$("#ref1").click(function(){
var div = $("#theDivToToggle");
div.toggle();
$(this).find("span").text(div.is(":visible") ? "CLOSE ALL CASES" : "SHOW ALL CASES");
});
$('.button').click(function() {
var span = $(this).find('span')
span.html(span.html() == 'CLOSE ALL CASES' ? 'VIEW ALL CASES' : 'CLOSE ALL CASES');
});
I opt to use .html() instead of .text() because you can have other HTML markup inside your span.
$('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');
}
});
$('#refl').click(function() {
$(this).text(function() {
return $('#your-element:visible').length ? 'CLOSE ALL CASES' : 'SHOW ALL CASES';
});
// hide code
});
$('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');
},
);
精彩评论