javascript - 当用户点击左侧详细信息中的产品时如何创建将显示在右侧
问题描述
我在左侧 div 中有 6 个产品...当我单击 product-1 时，只有 product-descript-1（product-1 的详细信息）将显示在右侧 div 中，并且产品的其余详细信息被隐藏....如果我单击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>解决方案
您需要使用类选择器，以便您可以定位所有产品，例如，您可以使用 addclass="product"到每个产品 div （与 product-ID 处于同一级别），然后一旦用户单击该类的任何项目，隐藏所有项目该类并仅显示当前单击的类。
这是一个简单的完整工作解决方案：
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="product" id="product_1">
<b>product1</b>
<p class="details">details</p>
</div>
<div class="product" id="product_2">
<b>product2</b>
<p class="details">details</p>
</div>
<div class="product" id="product_3">
<b>product3</b>
<p class="details">details</p>
</div>
<script>
$(function(){
$('.product').on('click',function(e){
$('.details').hide();
$(this).find('.details').show();
});
});
</script>
尝试理解这个解决方案，如果有不清楚的地方请告诉我，否则如果你觉得它有帮助，别忘了接受这个答案。
推荐阅读
- jenkins - Jenkins -OpenShift 中的 Kubernetes 插件。只有 jnlp 容器工作
- git - 如何在 Android Studio 的 Github 中放弃本地提交？
- javascript - 两种方式数据绑定在 Kendo UI 上不起作用
- javascript - 时间计数 - 从前端到后端
- c++ - 如何加密文件和隐藏密码
- nuget - 如何删除 NuGet 库
- java - JPA：父子关系合并不起作用
- google-apps-script - 使用带有 ARRAYFORMULA 的自定义 MD5 公式
- makefile - 找不到带有 scipt 的 Makefile 创建临时文件
- javascript - 如何将参数从 redux-saga 观察者发送到 AsyncFunction？