javascript - 单击图像以在 jquery 中显示其相应的 Div

Question

我有 6 张不同的图片，每张图片都有相应的“Div”。当我点击图片时，所有 6 张图片都需要隐藏，并且需要显示图片的相应 div。

例如，如果我单击图像 4，则需要显示 Div 4。其余的想法需要隐藏起来。

$(document).ready(function(e) {
  $("#mainContainer .demoImage").click(function(event) {
    $("#mainContainer").hide(1000);
    $("#detailProject +").show(1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<section>
  <div id="mainContainer">
    <div class="demo">
      <a href="javascript:void(0);" class="project1">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project2">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project3">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project4">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project5">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project6">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
  </div>
  <div id="detailProject1" style="display: none;">
    <h2>Project 1</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject2" style="display: none;">
    <h2>Project 2</h2>
    <p>Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
      passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject3" style="display: none;">
    <h2>Project 3</h2>
    <p>Printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
      but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release.</p>
  </div>
  <div id="detailProject4" style="display: none;">
    <h2>Project 4</h2>
    <p>Took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
  </div>
  <div id="detailProject5" style="display: none;">
    <h2>Project 5</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  <div id="detailProject6" style="display: none;">
    <h2>Project 6</h2>
    <p>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</section>

Fiddle

Answer 1

您可以使用 jQuery .data() 在两个元素上创建关系。检查下面更新的代码段..

$(document).ready(function(e) {
  $("#mainContainer .demoImage").click(function(event) {
    $("#mainContainer").hide();
    var elemId = "#" + $(this).data('id');
    $(elemId).show();
  });
  $('.close').click(function() {
    $(this).parent().hide();
    $("#mainContainer").show();

  })
});

.demo {
  display: inline-block;
  margin: 1%;
  width: 30%;
}

img {
  max-width: 100%;
}

.close {
  float: right;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div id="mainContainer">
    <div class="demo">
      <a href="javascript:void(0);" class="project1">
        <img src="http://via.placeholder.com/350x150" class="demoImage" data-id="detailProject1">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project2">
        <img src="http://via.placeholder.com/350x150" class="demoImage" data-id="detailProject2">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project3">
        <img src="http://via.placeholder.com/350x150" class="demoImage" data-id="detailProject3">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project4">
        <img src="http://via.placeholder.com/350x150" class="demoImage" data-id="detailProject4">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project5">
        <img src="http://via.placeholder.com/350x150" class="demoImage" data-id="detailProject5">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="project6">
        <img src="http://via.placeholder.com/350x150" class="demoImage" data-id="detailProject6">
      </a>
    </div>
  </div>
  <div id="detailProject1" style="display: none;">
    <div class="close">Close</div>
    <h2>Project 1</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject2" style="display: none;">
    <div class="close">Close</div>
    <h2>Project 2</h2>
    <p>Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
      passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div id="detailProject3" style="display: none;">
    <div class="close">Close</div>
    <h2>Project 3</h2>
    <p>Printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
      but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release.</p>
  </div>
  <div id="detailProject4" style="display: none;">
    <div class="close">Close</div>
    <h2>Project 4</h2>
    <p>Took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
  </div>
  <div id="detailProject5" style="display: none;">
    <div class="close">Close</div>
    <h2>Project 5</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  <div id="detailProject6" style="display: none;">
    <div class="close">Close</div>
    <h2>Project 6</h2>
    <p>t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</section>