点击图片

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类，显示为：none。

请帮忙！

编辑：

所以到目前为止我已经尝试了两种方式，但它们似乎并不适合我。可能是因为我在图像上有叠加？我已经尝试过针对实际的div元素，但是，我仍然无法加载内容。

Answer 1

这里我添加了您尝试实现的基本示例。您提供的代码的主要问题是您只有一个段落被您的代码隐藏并立即显示，因为您在#design和.hideDivs

之后引用了相同的元素

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;