Replace Appended text with new text on Click
With jquery I am adding a div and appending the text "click to view" when the div is showin I would like to chan开发者_如何学编程ge that text to "click to close"
Right now I have
$('#toggle_template')
.css('cursor','pointer')
.append(' (click to view)')
.click(function(){$('#template').toggle(500);
$('#toggle_template').find(' (click to view)').replaceWith(' (click to close)');});
With the html:
<div id ="toggle_template">This is a section header</div>
<div id="template">
Junk to show hide on click
</div>
The div is showing and hiding correctly and the text "click to view" is being added. I can't find a way to use jquery to remove the appended text I tryed .remove(click to view).append(click to close) and that didn't work. I'm sure I could wrap this text in a span and then add remove or change the class but there should be an easier way.
Any Ideas on how to change this text?
In your current codes, it can be done like this,
$('#toggle_template').css('cursor', 'pointer')
.append(' (click to view)')
.click(function() {
$('#template').toggle(500);
$('#toggle_template').html(function(i, html) {
if (html.indexOf(' (click to view)') > 1) {
return html.replace(' (click to view)', ' (click to close)');
}
return html.replace(' (click to close)', ' (click to view)');
});
});
crazy demo
This is one way:
var t = $('#toggle_template').text();
$('#toggle_template').text(t.replace(/ \(click to view\)/, ' (click to close)'));
...but you'll need more logic to change the text back.
As mentioned, it would be better to include other elements which you can show/hide in their entirety rather than modifying content dynamically like this. You could even do it entirely with css, by simply toggling a class on your toggle_template div and using the css 'after' pseudo element.
using a span is easier IMO.
but you can still do it by using regular expressions and matching / replacing (click to view) with (click to close)
I've also changed the click to a toggle and handled the changing of text back and hiding and showing of #template
Here's an example: http://jsbin.com/ixigi3/3
Also pastes here:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id ="toggle_template">This is a section header</div>
<div id="template">
Junk to show hide on click
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('#template').hide();
$('#toggle_template')
.css('cursor','pointer')
.append(' (click to view)')
.toggle( function(){
$('#toggle_template').html( $('#toggle_template').html().replace(/view\)/i, "close)") );
$('#template').show(500);
},
function(){
$('#toggle_template').html( $('#toggle_template').html().replace(/close\)/i, "view)") );
$('#template').hide(500);
});
});
</script>
</body>
</html>
you can use .html(''), this will empty the div contents.
("#divid").html("");
加载中,请稍侯......
精彩评论