2011-02-22 6 views
1

특정 div (#main_view)의 내용을 링크 내에 포함 된 div (.clickContent)의 내용으로 바꾸는 click 이벤트를 만들어야합니다. 나는 .clickContent의 DIV의 내용을 대상으로하고 main_view의 사업부를 대체하는 방법을 알아낼 수없는 것div를 다른 div의 내용으로 바꾸기

<div id="main_view">Main View Target</div> 

<ul class="webbies"> 
<li data-id="ab"> 
<a href="#"><img src="content/images/webby-andy-clarke.png" width="110" height="110" alt="" /></a> 
<div class="clickContent">This is the click content</div> 
</li> 
</ul> 


<script type="text/javascript"> 
$("ul.webbies li a").click(function() { 
var content = $(this).html($('.clickContent').html()); 
$("#main_view").replace(content); 
return false;  
}); 
</script> 

: 여기에 코드입니다.

미리 도움을 청하십시오.

$("ul.webbies li a").click(function(e) { 
    e.preventDefault(); 
    $("#main_view").html($('.clickContent').html()); 
}); 

지금 당신은 당신이 한 .clickContent DIV 이상이있는 경우 셀렉터를 조정해야 할 수도 있습니다 :

답변

6

당신이 생각하는 것보다 훨씬 간단합니다.

예. 이 클릭 된 링크의 다음 형제를 선택합니다 :

또한
$("ul.webbies li a").click(function(e) { 
    e.preventDefault(); 
    var content = $(this).next('.clickContent').html(); 
    if(content) $("#main_view").html(content); 
}); 

주의하는 것이 중요 복사 된 내용이 ID를 가진 요소가 포함되어있는 경우 동일한 ID를 사용하면 다음 여러 요소로, 자바 스크립트를 깰 수 있다는 것입니다.

+1

더 나은 기능 (E)'로 변경하는 html 태그 탈출 원한다면 당신은 또한 .html 중에서 대신는 .text 사용할 수 있습니다 사업부 */e.preventDefault(); }'그래서 거품이 계속 발생하고 그런 것 – Jimmy

+0

페이지에 여러 개의 li 항목이 있습니다. 그걸 처리하는 가장 좋은 방법은 무엇입니까? .closest 사용하기 ?? –

+0

@ 지미 : 완료. @ mmsa : 내 업데이트를 참조하십시오. 그것은 링크와 div 사이의 관계에 따라 다릅니다. div가 항상 링크를 직접 따르는 경우 두 번째 예제가 작동합니다. –

1

당신이 {/ * 대체

관련 문제