div内のテキストをjQueryに置き換えます。

デフォルトのテキストがあるtextContainerがあります。クリック可能なテキスト（A、B、C）があります。テキストをクリックすると、textContainerに関連付けられているテキスト（別のdivで定義済み）を表示する必要があります。私は次のセレクタを使ってテキストを取得するチュートリアルを見つけましたが、いくつかのコンテナでテキストを更新する必要があります。だから、必要に応じて、複数のコンテナ（divs）の中で作業を行い、テキストを更新する関数を作成してみてください。私はそれが理にかなって願っています（TGIFを...）div内のテキストをjQueryに置き換えます。

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

出典

2011-08-05 rex

[DIV要素内のテキストを置換]の可能な重複（http://stackoverflow.com/questions/121817/replace-text-inside-a-div-element） –

は私が個人的にdata-の属性ではなくクラスを使用してお勧めしたいフィドルにある：

出典

2011-08-05 20:43:55 StriplingWarrior

スーパー...ありがとうございました。あなたは私の月曜日に行った... – rex

は$（ 'P'、 '#textContainer'）を試してみてください。HTML（$（ 'テキスト' + $（この）の.html（））。HTML （））;

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

ここ

出典

2011-08-05 20:39:22 Kyle

この

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

出典

2011-08-05 20:39:51 ShankarSangoli

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

以上の方法を試してみてください名前あなたはどのコンテンツに関連付けられていたハンドラ識別するのに役立つ：

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

出典

2011-08-05 20:40:38

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


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

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


});

がhttp://jsfiddle.net/TdbxT/

出典

2011-08-05 20:42:00 Rafay

[OK]を、まず私は、整数のidの/クラスの代わりに、A/B/Cのような名前を使用して好みます。

これは単にタイプミスや混乱を避けるためです。はい、第三者のために読むのは難しいかもしれませんが、問題はありません。

クリックバインドされた要素のID /クラスをアニメーションのターゲットdivのID /クラスの一部として使用する命名法を作成するだけです。

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>

出典

2011-08-05 20:48:22

div内のテキストをjQueryに置き換えます。

答えて

関連する問題