入れ子divの内容を表示

Question

マップのdivを含むHTML文書を作成しました。地図はいくつかの興味のあるポイントを示しています。地図の下部には、PoIに関連するサムネイルのバーがあります。それぞれの画像はそのidとclass = "photoThumbnail"を持っています。マップの他に、class = sidebarを持つdivがあり、これには2つの要素が含まれています。

最初のもの（class = general）は常に表示され、2番目のもの（class = detail）は読み込み時に表示されないものとして設定されます。

画像バーの画像をクリックすると、地図上の相対的な位置にズームインします。同時に私は、脇の下のバーに、クリックされた画像にのみ関連するコンテンツを表示したいと思います。 HTMLの構造は以下の通りです：

写真のための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"> 

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; 
}); 

それは動作しません、何も表示されません。私は

$("aside").show(); 

を記述する場合、サイドバーはさておき、全要素の内容（すべての噴水の説明）を示しているが、私は（「aside_div_id」）.childrenを追加する場合、私は（唯一の泉要求されたコンテンツを見ることができません私はクリックした）。

Answer 1

@Peter権利である、あなたが引用符で囲む必要はありません "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>

は、それが