Javascript 当用户点击左侧产品时，如何创建详细信息将显示在右侧

我在左侧分区中有6个产品…当我单击产品-1时，只有产品-descript-1（产品-1的详细信息）将显示在右侧分区中，产品的其余详细信息将隐藏。。。。 如果单击product-2，则右侧仅显示product-descript-2（第二个产品的详细信息） 产品3和产品4、产品5和产品6也是一样的

//实际上我有40种产品
//建议简单的代码
//而不是使用这个脚本任何其他简单的方式
$（文档）.ready（函数（）
{
$（“#产品-1”）。单击（函数（）{
$（“#产品描述1”）.show（）
$（“#产品描述2、#产品描述3、#产品描述4、#产品描述5、#产品描述6）.隐藏（）
});
}

#产品描述2、#产品描述3、#产品描述4、#产品描述5、#产品描述6{
显示：无；
}

产品
maniac男式Cotton T恤

RS-399
maniac男式Cotton T恤

RS-399
maniac男式Cotton T恤

RS-399
maniac男式Cotton T恤

RS-399
maniac男式Cotton T恤

RS-399
maniac男式Cotton T恤

RS-399
立即购买
添加到购物车
立即购买
添加到购物车
立即购买
添加到购物车
立即购买
添加到购物车
立即购买
添加到购物车
立即购买
添加到购物车

您需要使用类选择器，以便可以针对所有产品，例如，您可以对每个产品div使用add

class=“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>

产品1
详细信息

产品2
详细信息

产品3
详细信息

$（函数（）{
$（'.product'）。在（'click'，函数（e）上{
$（'.details'）.hide（）；
$（this.find（'.details'）.show（）；
});
});

尝试理解此解决方案，如果有不清楚的地方，请告诉我，

---

否则，如果您觉得有帮助，请不要忘记接受此答案。

您需要使用类选择器，以便可以针对所有产品，例如，您可以使用add

class=“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>

产品1
详细信息

产品2
详细信息

产品3
详细信息

$（函数（）{
$（'.product'）。在（'click'，函数（e）上{
$（'.details'）.hide（）；
$（this.find（'.details'）.show（）；
});
});

尝试理解此解决方案，如果有不清楚的地方，请告诉我，

---

否则，如果您觉得有帮助，请不要忘记接受此答案。

下面是一个简单的示例，说明如何使用JavaScript完成此任务：

let i，products=document.getElementsByClassName（'product'）；//获取所有产品
对于（i=0；i

.flex{
显示器：flex；
宽度：100%；
}
.产品{
宽度：140px；
}
.信息{
填充：10px；
利润率：10px；
背景：灰色；
宽度：100%；
}
.产品{
背景：灰色；
颜色：#fff；
利润率：10px；
填充：10px；
宽度：100px；
}
.info{
宽度：100%；
颜色：#fff；
}
.隐藏{
显示：无；
}

产品1
产品2
产品3
产品4
信息1
信息2
信息3
信息4

下面是一个简单的示例，说明如何使用JavaScript完成此操作：

let i，products=document.getElementsByClassName（'product'）；//获取所有产品
对于（i=0；i