无法加载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>