单击图像，无法在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类，如：无。

帮助！

编辑：

所以我已经尝试了到目前为止发表评论的两种方式，但它们似乎对我不起作用。可能是因为我的图像上有一个覆盖层？我尝试针对实际的DIV元素，而是尝试定位它来加载内容。

Answer 1

在这里，我添加了您要实现的基本eSample。您提供的代码的主要问题是您只有一个段落，该段落是隐藏的，并且由您的代码直接显示，因为您是由#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>