单击图像以在jquery中显示其对应的Div

Question

我有6个不同的图像，每个图像都有相应的＆＃34; Div＆＃39; s＆＃34;。当我点击图像时，所有6个图像都需要隐藏，需要显示图像的相应div。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

您正在完全隐藏容器。您必须隐藏图像并显示单击的图像。

 $(document).ready(function(e){
        $("#mainContainer .demoImage").click(function(event){
        $(".demoImage").hide(1000);    
   $("#detailProject"+$(this).parent().attr("class").match(/\d/g)).show(1000);
      });
    });

https://jsfiddle.net/Lm6qwzxv/2/

＆＃13;

＆＃13;

$(document).ready(function(e){
    	$("#mainContainer .demoImage").click(function(event){
      	$(".demoImage").hide(1000);           $("#detailProject"+$(this).parent().attr("class").match(/\d/g)).show(1000);
      });
    });

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

单击图像时获取class值，使用clicked元素的类值连接值#project，然后将其用作选择器：

＆＃13;

＆＃13;

$(document).ready(function(e) {
    $("#mainContainer .demoImage").click(function(event) {
        $("#mainContainer").hide(1000);
        var val = "#detail" + $(this).closest("a").attr("class")
        $(val).show(1000);
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意：您必须将班级名称从project更改为Project

Answer 4

请参阅更新的jsfiddle：https://jsfiddle.net/sc32a4bg/1/

我将每个链接更改为Xproject，然后在jquery中使用

$("#detailProject" + $(this).parent().attr("class").substring(0, 1)).show(1000);

完整更新的代码

HTML：

<section>
  <div id="mainContainer">
    <div class="demo">
      <a href="javascript:void(0);" class="1project">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="2project">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="3project">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="4project">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="5project">
        <img src="http://via.placeholder.com/350x150" class="demoImage">
      </a>
    </div>
    <div class="demo">
      <a href="javascript:void(0);" class="6project">
        <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>

JS：

$(document).ready(function(e){
    $("#mainContainer .demoImage").click(function(event){
    $("#mainContainer").hide(1000);
    $("#detailProject" + $(this).parent().attr("class").substring(0, 1)).show(1000);
  });
});