div의 텍스트를 jQuery로 바꾸기

기본 텍스트가있는 textContainer가 있습니다. 클릭 가능한 텍스트 (A, B, C)가 있습니다. 텍스트를 클릭하면 textContainer에서 텍스트를 다른 div에서 미리 정의 된 텍스트로 표시해야합니다. 다음 선택기를 사용하여 텍스트를 가져 오는 튜토리얼을 발견했지만 여러 컨테이너에서 텍스트를 업데이트해야 할 가능성이 있습니다. 따라서 작업을 수행하고 필요한 경우 여러 컨테이너 (div)의 텍스트를 업데이트하는 함수를 만들어보십시오. 나는 이해가 희망 (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

이 좋아, 먼저 내가 대신 A/B/C와 같은 이름의 정수 아이디의/클래스를 사용하여 선호 : 당신은 어떤 콘텐츠에 연결되는 핸들러 식별 할 수 있도록합니다.

이것은 단순히 오타 및 혼동을 피하기위한 것입니다. 그렇지만 제 3자를 위해 읽는 것이 더 어려울 수는 있지만 중요하지는 않습니다.

클릭 바인딩 된 요소의 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로 바꾸기

답변

관련 문제