여러 div에 콘텐츠를 연결할 수있는 방법이 있습니까?

Question

이 질문을하는 방법을 잘 모르겠습니다. 아래에서 제가 성취하고자하는 것을 시각화 한 것입니다. 명확히 할 수있는 것이 있으면 알려주세요!

설명 : 슬라이드 1에서 이미지 01과 이미지 02를 볼 수 있습니다. 사람이 이미지를 클릭 할 때만 텍스트와 제목 div가 표시됩니다. 더 중요한 것은 텍스트 상자가 페이지 래퍼와 일관성이 있어야한다는 것입니다. 예를 들어, 텍스트 div를 float:right으로 설정하면 페이지 래퍼의 오른쪽에 떠있게됩니다.

은 사전에 감사합니다.

Answer 1

이 동작을 얻으려면 JavaScript가 필요합니다. 다음과 같이 시도 할 수 있습니다.

약간의 의사 코드로 된 모든 것.

HTML :

<img src="..." class="img1 clickImage"> 
<img src="..." class="img2 clickImage"> 

<div class="imageTitles"> 
    <div class="img1 imgTitle">TITLETEXT</div> 
    <div class="img2 imgTitle">TITLETEXT</div> 
</div> 

<div class="imageInformations"> 
    <div class="img1 imgInformation">INFORMATION img1</div> 
    <div class="img2 imgInformation">INFORMATION img2</div> 
</div> 

그리고 어떤 jQuery를 : 조금 거친

jQuery('.clickImage').on('click', function() { 
    var imgNumber = jQuery(this).getClass().replace('clickImage', ''); 
    jQuery('imageTitles .imgTitle').hide(); //hide all image Titles 
    jQuery('imageTitles .imgTitle.' + imgNumber).show(); //show title for e.g. img1 

    //repeat this for imgInformation 
}); 

다,하지만 난 당신에게 당신이 무엇을해야하는지 아이디어를 제공 바랍니다.

---

편집 : 코드는 이제 다음과 같습니다

HTML :

<img src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg" class="img1 clickImage"> 
<img src="http://media.tumblr.com/tumblr_mcf11pk4nj1ru82ue.jpg" class="img2 clickImage"> 
<div id="page-wrap"> 
    <div class="imageTitles"> 
    <div class="img1 imgTitle">TITLETEXT</div> 
    <div class="img2 imgTitle">TITLETEXT</div> 
    </div> 
    <div class="imageInformations"> 
    <div class="img1 imgInformation">INFORMATION img1</div> 
    <div class="img2 imgInformation">INFORMATION img2</div> 
    </div> 
</div> 

JS :

jQuery('.imageTitles .imgTitle').hide(); 
jQuery('.imageInformations .imgInformation').hide(); 

jQuery('.clickImage').on('click', function() { 
    var imgNumber = jQuery(this).attr("class").replace('clickImage', ''); 
    jQuery('.imageTitles .imgTitle').hide(); //hide all image Titles 
    jQuery('.imageTitles .imgTitle.' + imgNumber).show(); //show title for e.g. img1  
    jQuery('.imageInformations .imgInformation').hide(); 
    jQuery('.imageInformations .imgInformation.' + imgNumber).show(); 
}); 

Answer 2

이를 달성하는 방법에는 여러 가지가 있습니다.

1) 정적 인 모든 것, 즉 이미지에 대한 정보는 이미 다른 div의 페이지에서 사용할 수 있습니다. 예 : 당신이 다른 사용할 나는

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script type="text/javascript"> 
 
\t $(document).ready(function() { 
 
\t \t $('.switch').hide(); 
 
\t }); 
 
\t function myInfo(myId) 
 
\t { 
 
\t \t $('.switch').hide(); 
 
\t \t $('#title'+myId).show(); 
 
\t \t $('#description'+myId).show(); 
 
\t } 
 
</script> 
 
<table> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t \t <!-- Images --> 
 
\t \t \t <img onclick="return myInfo('1')" id='image1' height="60" width="60" src="http://static3.businessinsider.com/image/52cddfb169beddee2a6c2246/the-29-coolest-us-air-force-images-of-the-year.jpg" alt="Image1"><br/> 
 
\t \t \t <img onclick="return myInfo('2')" id='image1' height="60" width="60" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR6I83EILo3XKIsqZ-0Q5JAEw38xGzsy1g_iKImqjBrMVaOHYb4Zg" alt="Image2"> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t \t <div id="title1" class="switch"> Image 1</div> 
 
\t \t \t <div id="title2" class="switch"> Image 2</div> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t \t <div id="description1" class="switch"> Information about Image 1 </div> 
 
\t \t \t <div id="description2" class="switch"> Information about Image 2 </div> 
 
\t \t </td> 
 
\t </tr> 
 
</table>

2) 당신이 사용하는 AJAX는 정보를 제목과 1이 경우에는 단지 1 개 사업부, 이미지 정보를 요구 달성 할 수있는 작업은 충분하다 1 div이면 충분합니다. 이미지를 클릭하면 AJAX 호출을 통해 이미지 정보를 얻고 div에 표시합니다.

이들은 2 가지이며 더 많은 내용이 있습니다.