divの隠しコンテンツを画像のクリックで読み込めません

Question

---

画像をクリックしてその画像に関連するコンテンツを読み込むまで、コンテンツを隠そうとしています。

そうのような私のコードが見えます：

HTML：

<div class="projects"> 
    <h2>Newest Projects</h2> 
    <p>Here are some of my newest works.</p> 
    <div class="project-image"> 
     <div class="overlay"> 
      <p>&Design</p> 
      <p>Development</p> 
     </div> 
     <img src="images/anddesignedit.png" data-id="design"> 
    </div> 
    <div class="project-image"> 
     <div class="overlay"> 
      <p>Roberts Landscaping</p> 
      <p>Design and Development</p> 
     </div> 
     <img src="images/landscapinglogo.png" data-id="landscaping"> 
    </div> 
    <div class="project-image"> 
     <div class="overlay"> 
      <p>Cuda</p> 
      <p>Development</p> 
     </div> 
     <img src="images/cudalogo.png" data-id="cuda"> 
    </div> 

    <div class="clicked-content"> 
     <div id="design" class="hideDivs"> 
      <h3>&Design</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit elit vitae luctus gravida. Duis nisl urna, egestas id lectus quis, suscipit sagittis ante. Aenean sed massa magna. Nunc et bibendum nibh. Morbi ut eros diam. Donec quam ipsum, imperdiet ultricies tristique at, gravida finibus erat. Integer laoreet volutpat sagittis. Donec pretium, lacus a ullamcorper dapibus, massa neque fermentum augue, eget convallis tortor orci nec nisl</p> 
     </div> 

スクリプトコードはそうのようになります。

$("img").on('click',function(){ 
     var hello = $(this).attr('data-id'); 
     $('.hideDivs').hide(); 
     $('#'+hello).show(); 
});  

私は私のCSSで.hideDivクラスを持っていますディスプレイとして：なし。

お願いします！ EDITED

：

だから私は方法の両方を試してみたが、これまでのコメントが、彼らは私のために動作していないようです。画像にオーバーレイがあるためかもしれませんか？代わりに実際のdiv要素を対象にしようとしましたが、コンテンツを読み込むことができません。

Answer 1

ここでは、達成しようとしているものの基本的なサンプルを追加しました。あなたが提供したコードの主な問題は、あなたが#designで同じ要素に言及ので、あなたは、隠されたとimmediatellyあなたのコードで示された一つだけの段落を持っていたし、.hideDivs

$("img").on('click', function() { 
 
    console.log('hey ther'); 
 
    var hello = $(this).attr('data-id'); 
 
    $('.hideDivs').hide(); 
 
    $('#' + hello).show(); 
 
});

img { 
 
    display: block; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.project-image { 
 
    border: 1px solid red; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 
.hideDivs { 
 
    display: none; 
 
} 
 
.hideDivs:first-child { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="projects"> 
 
    <h2>Newest Projects</h2> 
 
    <p>Here are some of my newest works.</p> 
 
    <div class="project-image"> 
 
    <div class="overlay"> 
 
     <p>Design</p> 
 
     <p>Development</p> 
 
    </div> 
 
    <img src="images/anddesignedit.png" data-id="design"> 
 
    </div> 
 
    <div class="project-image"> 
 
    <div class="overlay"> 
 
     <p>Roberts Landscaping</p> 
 
     <p>Design and Development</p> 
 
    </div> 
 
    <img src="images/landscapinglogo.png" data-id="landscaping"> 
 
    </div> 
 
    <div class="project-image"> 
 
    <div class="overlay"> 
 
     <p>Cuda</p> 
 
     <p>Development</p> 
 
    </div> 
 
    <img src="images/cudalogo.png" data-id="cuda"> 
 
    </div> 
 

 
    <div class="clicked-content"> 
 
    <div id="design" class="hideDivs"> 
 
     <h3>Design</h3> 
 
     <p>Design lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit elit vitae luctus gravida. Duis nisl urna, egestas id lectus quis, suscipit sagittis ante. Aenean sed massa magna. Nunc et bibendum nibh. Morbi ut eros diam.</p> 
 
    </div> 
 
    <div id="landscaping" class="hideDivs"> 
 
     <h3>Roberts Landscaping</h3> 
 
     <p>Roberts lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit elit vitae luctus gravida. Duis nisl urna, egestas id lectus quis, suscipit sagittis ante. Aenean sed massa magna. Nunc et bibendum nibh. Morbi ut eros diam.</p> 
 
    </div> 
 
    <div id="cuda" class="hideDivs"> 
 
     <h3>Cuda</h3> 
 
     <p>Cuda lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit elit vitae luctus gravida. Duis nisl urna, egestas id lectus quis, suscipit sagittis ante. Aenean sed massa magna. Nunc et bibendum nibh. Morbi ut eros diam.</p> 
 
    </div> 
 
    </div>