중첩 된 div의 내용 표시

Question

지도 용 div가있는 HTML 문서를 만들었습니다. 지도에 관심 장소가 표시됩니다. 지도 하단에는 PoI와 관련된 축소판이있는 막대가 있습니다. 각 사진의 ID는 class = "photoThumbnail"입니다. 지도 외에도 class = sidebar가있는 div가 있습니다. div에는 차례로 두 개의 요소가 있습니다.

첫 번째 (클래스 = 일반)는 항상 표시되고 두 번째 (클래스 = 세부 정보)는로드시 보이지 않는 것으로 설정됩니다.

그림 막대에서 그림을 클릭하면지도가 상대 관심 지점으로 확대됩니다. 동시에 나는 옆에있는 막대에 클릭 된 그림에만 관련된 내용을 표시하고 싶습니다. 사진에 대한

HTML 요소 :

이

<div class="sidebar" id="fountainSideBar" role="complementary"> 
    <aside class="general"> 
     <h2>Fountains</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>   
    </aside>  
    <aside class="detail"> 
     <div id="fountain1-AS"> 
      <h2>Fountain1</h2>    
      <div class="caption">   
       <img id="fountain1-AS-img" class="asideImage" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5"> 
      </div> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
     <div id="fountain2-AS"> 
      <h2>Fountain2</h2>    
      <div class="caption">   
       <img id="fountain2-AS-img" class="asideImage" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5"> 
      </div> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
    </aside> 
</div> 

JQuery와 스크립트는 다음과 같다 :

$(".photoThumbnail").click(function(){ 
    var img_id = this.id; 
    var aside_div_id = "#" + img_id + "-AS"; 
    $("aside").children("aside_div_id").show(); 
    return false; 
}); 

사이드 바에 대한

<img id="fountain1" class="photoThumbnail" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5"> 
<img id="fountain2" class="photoThumbnail" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5"> 

HTML 요소 HTML 구조는 다음과 작동하지 않고 아무것도 표시되지 않습니다. 난 단지

$("aside").show(); 

을 작성하는 경우 사이드 바는 따로 전체 요소의 내용 (모든 분수의 설명)를 보여줍니다,하지만 난 ("aside_div_id") .children를 추가하면 내가 (단지 분수 요청 된 내용을 볼 수 없습니다 나는 클릭했다).

Answer 1

@ 피터는 바로, 당신은 "aside_div_id"주위에 따옴표가 필요하지 않습니다 :

jQuery(document).ready(function() { 
    $(".photoThumbnail").click(function(){ 
     var img_id = this.id; 
     console.log(this.id); 
     var aside_div_id = "#" + img_id + "-AS"; 
     $("aside").children(aside_div_id).show(); 
     return false; 
    }); 
}); 

working jsfiddle

Answer 2

사용이 fiddle을. 도움이 될 수 있습니다!

JS :

$(".photoThumbnail").click(function(){ 
    var img_id = $(this).attr('id'); 
    var aside_div_id = "#" + img_id + "-AS"; 
    $("aside").children('div[id^="fountain"]').hide(); 
    $("aside").children(aside_div_id).show(); 
    return false; 
}); 

HTML : 당신이 잘못된 방법으로 아이들을 찾기 위해 노력하고있다

<img id="fountain1" class="photoThumbnail" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5"> 
<img id="fountain2" class="photoThumbnail" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5"> 

<div class="sidebar" id="fountainSideBar" role="complementary"> 
    <aside class="general"> 
     <h2>Fountains</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>   
    </aside>  
    <aside class="detail"> 
     <div id="fountain1-AS"> 
      <h2>Fountain1</h2>    
      <div class="caption">   
       <img id="fountain1-AS-img" class="asideImage" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5"> 
      </div> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
     <div id="fountain2-AS" style="display:none;"> 
      <h2>Fountain2</h2>    
      <div class="caption">   
       <img id="fountain2-AS-img" class="asideImage" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5"> 
      </div> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
    </aside> 
</div> 

Answer 3

. "옆으로"유형의 요소를 가져옵니다 찾을 사용할 수 있으며 필요

체크

$(document).ready(function() { 
 
    $(".photoThumbnail").click(function() { 
 
    var img_id = this.id; 
 
    var aside_div_id = "#" + img_id + "-AS"; 
 

 
    var childDiv = $("aside.detail").find(aside_div_id); 
 
    $(childDiv[0]).show().addClass('red'); 
 
    }); 
 

 
});

.red { 
 
    background: red; 
 
} 
 
.detail div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="fountain1" class="photoThumbnail" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5"> 
 
<img id="fountain2" class="photoThumbnail" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5"> 
 

 
<div class="sidebar" id="fountainSideBar" role="complementary"> 
 
    <aside class="general"> 
 
    <h2>Fountains</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
    </aside> 
 
    <aside class="detail"> 
 
    <div id="fountain1-AS"> 
 
     <h2>Fountain1</h2> 
 
     <div class="caption"> 
 
     <img id="fountain1-AS-img" class="asideImage" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5"> 
 
     </div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
    </div> 
 
    <div id="fountain2-AS"> 
 
     <h2>Fountain2</h2> 
 
     <div class="caption"> 
 
     <img id="fountain2-AS-img" class="asideImage" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5"> 
 
     </div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
    </div> 
 
    </aside> 
 
</div>

그것이 ("옆으로")