replacing text in a div with jQuery
I have a textContainer where there will some default text. And there are some clickable text(A,B,C). When a text is clicked it needs to show the text associated with it(pre define in another div) on the textContainer. I found some tutorial which uses next selector to grab the text but chances are that I will need to update text in several containers. So Try to create a function that will do the work and update te开发者_如何学Pythonxt in multiple containers(divs) if needed. I hope it make sense(TGIF..)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".content").css('display','none');
$(".handler").click(function(){
alert("what what");
});
});
</script>
<body>
<div id="textContainer">
<P>This is where the text is update</P>
</div>
<div class="handler A" >A</div>
<div class="handler B" >B</div>
<div class="handler C" >C</div>
<div class="content textA"> Text A </div>
<div class="content textB"> Text B </div>
<div class="content textC"> Text C </div>
I'd personally recommend using data- attributes rather than class names to help you identify which handler is tied to which content:
<div id="textContainer">
<P>This is where the text is update</P>
</div>
<div class="handler" data-handles="A">A</div>
<div class="content" data-text="A"> Text A </div>
...
<script type="text/javascript">
$(document).ready(function() {
$(".content").css('display','none');
$(".handler").click(function(){
var identifier = $(this).attr('data-handles');
var content = $(".content[data-text=" + identifier + "]").html();
$("#textContainer > p").html(content);
});
});
</script>
Try $('p', '#textContainer').html($('.text' + $(this).html()).html());
Try this
$(document).ready(function() {
$(".content").css('display','none');
$(".handler").click(function(){
$("#textContainer p").html($(this).html());
});
});
$(".handler").click(function(){
$("#textContainer > p").html($(".text"+$(this).val()).html());
});
or longer way:
$(".handler").click(function(){
var letter = $(this).val();
var text = $(".text"+letter).val();
$("#textContainer > p").html(text);
});
$("div").not("#textContainer").click(function(){
var txt = $(this).html();
$("#textContainer").html(txt);
});
here is the fiddle http://jsfiddle.net/TdbxT/
Ok, firstly i prefer using integer id's / classes instead of names like A/B/C.
This is simply to avoid typo's and confusion, yes it may be harder to read for a third party but doesn't matter.
Simply create nomenclature that uses the id / class of the click bound element as part of the id / class of the target div for animation.
IE:
<script type="text/javascript">
$(document).ready(function() {
$(".content").css('display','none');
$(".handler").click(function(){
var id = $(this).attr("id");
$("#textContainer").html($("#" + id.toString() + "T").html());
});
});
</script>
<body>
<div id="textContainer">
<P>This is where the text is update</P>
</div>
<div id="1" class="handler" >A</div>
<div id="2" class="handler" >B</div>
<div id="3" class="handler" >C</div>
<div id="1T" class="content"> Text A </div>
<div id="2T" class="content"> Text B </div>
<div id="3T" class="content"> Text C </div>
加载中,请稍侯......
精彩评论