javascript - 如何根据产品点击在不同产品的特定 div 同一页面上显示产品描述？

Question

我想做一个电子商务网站。在产品页面中，我们有一个产品图片列表，在产品图片上的悬停链接上，我们需要为不同的产品显示不同的描述。我在这里附上一些代码。这适用于一种或两种产品。我需要申请很多产品。请帮助我

<script type="text/javascript" language="javascript">
function hide(id){
var element = document.getElementById(id); 
element.style.display = "none";
}
function show(id){
var element = document.getElementById(id); 
element.style.display = "";
}
function toggle(id){
var element = document.getElementById(id); 
element.style.display = (element.style.display == "") ? "none" : "";
}
function showDetail(){show("view-details");hide("view-summary");}
function showSummary(){show("view-summary");hide("view-details");} 
</script>

<a onclick="showDetail()" class="text" href="#">Mirror</a> |
<a onclick="showSummary()" class="text" href="#">Trolley</a>

<p>
 <div id="view-details" style="display:none;border:1px solid red;">
  im mirror
</div>

<div id="view-summary" style="display:none;border:1px solid blue;">I'm Trolley</div>
</p>

Answer 1

虽然可能，但您可以在不使用 JavaScript 的情况下创建您想要的内容。例如，通过使用 HTML 和 CSS，您可以实现此功能并创建悬停效果以显示产品详细信息。这是一个例子。

.products {
  display: flex;
  flex-flow: column wrap;
}

.product #view-details {
  display: none;
}

.product:hover #view-details {
  display: block;
}

.product {
  display: flex;
  flex-flow: column no-wrap
}

<div class="products">
  <div class="product">
    <img src="https://www.thakehamfurniture.co.uk/productimages/antique-convex-mirror-31-L.jpg" width="200px" height="200px">
    <div id="view-details">
      <h3>Details:</h3>
      <p>I'm mirror</p>
    </div>
  </div>

  <div class="product">
    <img src="http://www.horme.com.sg/Images/product/20131128101131F6MGSX6EGACPH_full.jpg" width="200px" height="200px">
    <div id="view-details">
      <h3>Details:</h3>
      <p>I'm a trolley</p>
    </div>
  </div>
</div>