replacing text in a div with jQuery_问答_开发者

开发者 https://www.devze.com 2023-03-26 00:44 出处：网络

相关专题：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>