我在左侧div中有6个产品...当我单击product-1时，右侧div中将仅显示product-descript-1（product-1的详细信息），而产品的其余详细信息将被隐藏。 .. 如果我单击product-2，则右侧仅显示product-descript-2（第二个产品的详细信息） 和product-3和prodcut4以及product-5和product-6的方式相同
//actually i have 40 products
//suggest simple code
//instead of using this script any other simple way
<script type="text/javascript">
$(document).ready(function()
{
$("#product-1").click(function(){
$("#product-descript1").show()
$("#product-descript2,#product-descript3,#product-descript4,#product-descript5,#product-descript6).hide()
});
}
</script> #product-descript2,#product-descript3,#product-descript4,#product-descript5,#product-descript6{
display:none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>products</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="css/xzoom.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="js/jquery.elevatezoom.js"></script> -->
<script type="text/javascript" src="js/xzoom.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body>
<!--left div-->
<div class="col-lg-8 col-md-8 text-center">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-1">
<div class="pic">
<img class="product-img" src="images/t-shirt-1.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-2">
<div class="pic">
<img class="product-img" src="images/t-shirt-2.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-3">
<div class="pic">
<img class="product-img" src="images/t-shirt-3.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-4">
<div class="pic">
<img class="product-img" src="images/t-shirt-4.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-5">
<div class="pic">
<img class="product-img" src="images/t-shirt-5.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<div class="card" id="product-6">
<div class="pic">
<img class="product-img" src="images/t-shirt-6.jpg">
</div><!--pic-->
<div class="pic-body">
<p>maniac mens cottton T-shirt</p>
<h5>RS-399</h5>
</div><!--pic-body-->
</div><!--card-->
</div><!--md-4-->
</div><!--lg-8-->
<!--right-div-->
<div class="col-lg-4 col-md-4">
<div class="col-lg-12 col-md-12" id="product-descript1">
<div class="product-img">
<img src="images/bt-shirt-1.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript2">
<div class="product-img">
<img src="images/bt-shirt-2.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript3">
<div class="product-img">
<img src="images/bt-shirt-3.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript4">
<div class="product-img">
<img src="images/bt-shirt-4.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript5">
<div class="product-img">
<img src="images/bt-shirt-5.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
<div class="col-lg-12 col-md-12" id="product-descript6">
<div class="product-img">
<img src="images/bt-shirt-6.jpg">
</div><!--product-img-->
<div class="col-lg-6 col-md-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-shopping-bag btn-symbol"></i>Buy Now</button>
</div><!--md-6-->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center btns">
<button class="btn btn-success buy-btn"><i class="fas fa-cart-arrow-down btn-symbol"></i>Add To Cart</button>
</div><!--md-6-->
<div><!--md-12-->
</div><!--lg-4-->
</body>
</html>
答案 0 :(得分：1)
您需要使用类选择器，以便可以定位所有产品，例如，可以在每个产品div上使用添加ZipCodeSchema.plugin(uniqueValidator, { type: 'mongoose-unique-validator' });
（与product-ID处于同一级别），然后在用户单击任何项目时使用该类别的用户隐藏该类别的所有项目，并仅显示当前单击的项目。
这是一个简单的完整工作解决方案：
class="product"请尝试了解此解决方案，如果不清楚，请告诉我， 否则，如果您认为有帮助，请不要忘记接受此答案。
答案 1 :(得分：1)
这是一个简单的示例，说明如何使用JavaScript完成此操作：
let i, products = document.getElementsByClassName('product'); // get all products
for (i = 0; i < products.length; i++) {
products[i].onclick = function() {
showInfo(this.id)
}; // add onclick Event to all products
}
function showInfo(id) {
let x, infos = document.getElementsByClassName('info'); // get all infos
for (x = 0; x < infos.length; x++) {
(infos[x].id === 'info-' + id) ? infos[x].className = 'info': infos[x].className = 'info hidden'; // Show info for clicked product only
}
}.flex {
display: flex;
width: 100%;
}
.products {
width: 140px;
}
.infos {
padding: 10px;
margin: 10px;
background: grey;
width: 100%;
}
.product {
background: grey;
color: #fff;
margin: 10px;
padding: 10px;
width: 100px;
}
.info {
width: 100%;
color: #fff;
}
.hidden {
display: none;
}<div class="flex">
<div class="products">
<div class="product" id="product1">
Product 1
</div>
<div class="product" id="product2">
Product 2
</div>
<div class="product" id="product3">
Product 3
</div>
<div class="product" id="product4">
Product 4
</div>
</div>
<div class="infos">
<div class="info" id="info-product1">
Info 1
</div>
<div class="info hidden" id="info-product2">
Info 2
</div>
<div class="info hidden" id="info-product3">
Info 3
</div>
<div class="info hidden" id="info-product4">
Info 4
</div>
</div>
</div>
答案 2 :(得分：0)
一个简单的可行解决方案可以将文件加载到<div>中。
请参见以下代码段。这会从您的目录中调用一个外部文件，并将其设置为<div class="Product"></div>。我已经通过SSI在其中设置了文件路径，因此将加载内容（也许内容告诉用户在菜单中选择产品）。
菜单可以是任何东西-图像，文本等-在此示例中我仅使用文本。
要调整您的需求，您需要对其进行编辑：
Product1：将其更改为您在菜单中使用的唯一ID。 DivToContent：将其更改为所需内容的<div>的CLASS名称。PathTo/File1.html：将其更改为文件的路径。charset=ISO-8859-1：更改为您使用的charset 我没有提供任何CSS，因为您可以根据需要设置所有类的样式。所有ID标签仅适用于脚本。如果需要，可以提供一个简洁的过渡。
对于六个以上的产品，只需在下面复制/粘贴并编辑数字即可。
$('#Product1').click(function(e) {
$('.DivToContent').load('PathTo/File1.html');
e.preventDefault();
});
$(function() {
$('#Product1').click(function(e) {
$('.DivToContent').load('PathTo/File1.html');
e.preventDefault();
});
$('#Product2').click(function(e) {
$('.DivToContent').load('PathTo/File2.html');
e.preventDefault();
});
$('#Product3').click(function(e) {
$('.DivToContent').load('PathTo/File3.html');
e.preventDefault();
});
$('#Product4').click(function(e) {
$('.DivToContent').load('PathTo/File4.html');
e.preventDefault();
});
$('#Product5').click(function(e) {
$('.DivToContent').load('PathTo/File5.html');
e.preventDefault();
});
$('#Product6').click(function(e) {
$('.DivToContent').load('PathTo/File6.html');
e.preventDefault();
});
});
$.ajaxSetup({
'beforeSend': function(xhr) {
xhr.overrideMimeType('text/html; charset=ISO-8859-1');
}
});
// Handler to wrap a SPAN around what is selected
$(document).on('click', '.DivMenu a', function(e) {
$('.DivMenu .productselected a').unwrap( )
$(this).wrap("<span class='productselected'></span>");
});<div class="DivMenu">
<p>
<a id="Product1" href="javascript:;">Product1</a> |
<a id="Product2" href="javascript:;">Product2</a> |
<a id="Product3" href="javascript:;">Product3</a> |
<a id="Product4" href="javascript:;">Product4</a> |
<a id="Product5" href="javascript:;">Product5</a> |
<a id="Product6" href="javascript:;">Product6</a>
</p>
</div>
<div class="DivToContent"><!--#include virtual="PathTo/File0.html"--></div>