Javascript 单击图像以在jquery中显示其相应的Div
我有6张不同的图片，每张图片都有相应的Div。当我点击图像时，所有6个图像都需要隐藏，并且需要显示图像的相应div 例如，如果我单击image 4，则需要显示Div 4。其余的想法需要隐藏起来 $document.readyFunction{ $mainContainer.demoImage.clickfunctionevent{ $maincainer.hide1000； $detailProject+.show1000； }; }; 项目1 Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。信息技术 它不仅存活了五个世纪，而且还跨越到了电子排版，发布了像Aldus PageMaker这样的软件，包括Lorem Ipsum的版本 项目2 自16世纪以来，Ipsum一直是行业标准的虚拟文本。当时，一位不知名的印刷商拿起一个打印槽，将其拼凑成一个字体样本。20世纪60年代，随着包含Lorem Ipsum的Letraset纸张的发行，Ipsum开始流行 文章，以及最近的桌面出版软件，如Aldus PageMaker，包括Lorem Ipsum版本 项目3 印刷和排版业。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪， 但也向电子排版迈进，基本保持不变。它在20世纪60年代随着发行而流行起来 项目4 拿起一个铅字厨房，把它翻成一本铅字样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变 项目5 Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书 项目6 t不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行 发布软件，如Aldus PageMaker，包括Lorem Ipsum版本Javascript 单击图像以在jquery中显示其相应的Div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有6张不同的图片，每张图片都有相应的Div。当我点击图像时，所有6个图像都需要隐藏，并且需要显示图像的相应div 例如，如果我单击image 4，则需要显示Div 4。其余的想法需要隐藏起来 $document.readyFunction{ $mainContainer.demoImage.clickfunctionevent{ $maincainer.hide1000； $detailProject+.show1000； }; }; 项目1 Lorem Ipsum只是印刷和排版行业的虚拟文
你把容器完全藏起来了。您必须隐藏图像并显示单击的图像
$(document).ready(function(e){
$("#mainContainer .demoImage").click(function(event){
$(".demoImage").hide(1000);
$("#detailProject"+$(this).parent().attr("class").match(/\d/g)).show(1000);
});
});
$("#detailProject" + $(this).parent().attr("class").substring(0, 1)).show(1000);
不我需要隐藏图像并显示下面的内容分区。。例如，如果单击class=project5 image，则所有图像都需要隐藏并显示Div id=detailProject5@RajaO看起来你编辑了你的问题。我也编辑了我的答案。希望这能帮上忙。。但是在id>9的地方可能会出现潜在的bug：很好的观点-真不敢相信我没有想到会有那么远的距离哈！我真的很喜欢超级用户的回答。
<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>
$(document).ready(function(e){
$("#mainContainer .demoImage").click(function(event){
$("#mainContainer").hide(1000);
$("#detailProject" + $(this).parent().attr("class").substring(0, 1)).show(1000);
});
});