Question

我有一个textContainer，其中会有一些默认文本。还有一些可点击的文字（A，B，C）。单击文本时，需要在textContainer上显示与其关联的文本（在另一个div中预定义）。我找到了一些使用下一个选择器来获取文本的教程，但我可能需要更新几个容器中的文本。因此，如果需要，尝试创建一个可以完成工作并在多个容器（div）中更新文本的函数。我希望它有意义（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>

Answer 1

我个人建议使用data-属性而不是类名来帮助您确定哪个处理程序与哪些内容相关联：

<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>

Answer 2

尝试$（'p'，'＃textContainer'）。html（$（'。text'+ $（this）.html（））。html（））;

Answer 3

试试这个

$(document).ready(function() {
$(".content").css('display','none');
$(".handler").click(function(){ 
    $("#textContainer p").html($(this).html());
  });
 });

Answer 4

$(".handler").click(function(){ 
    $("#textContainer > p").html($(".text"+$(this).val()).html());
});

或更长的路：

$(".handler").click(function(){ 
    var letter = $(this).val();
    var text = $(".text"+letter).val();
    $("#textContainer > p").html(text);
});

Answer 5

$("div").not("#textContainer").click(function(){


var txt = $(this).html();

    $("#textContainer").html(txt);


});

这里是小提琴http://jsfiddle.net/TdbxT/

Answer 6

好的，首先我更喜欢使用整数id /类而不是像A / B / C这样的名字。

这只是为了避免拼写错误和混淆，是的，它可能更难为第三方阅读但无关紧要。

只需创建命名法，使用click bound元素的id / class作为动画目标div的id / class的一部分。

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>

用jQuery替换div中的文本

6 个答案: