無法加載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(); 
});  

我有一個.hideDiv類在我的CSS如顯示：無。

請幫忙！

編輯：

所以我都試過的方式評論到目前爲止，但他們似乎並沒有爲我工作。這可能是因爲我在圖像上覆蓋了一層？我嘗試了針對實際的div元素，但是，我仍然無法獲取它加載內容。

Answer 1

這裏我已經添加了你想要實現的基本範例。您所提供的代碼的主要問題是，你只有一個段落裏面藏着並通過代碼immediatelly顯示，因爲你通過#design和.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>