javascript - 新点击时显示/隐藏重置

Question

我有一个产品列表，当您单击该项目时，将显示该产品的信息。我可以显示/隐藏，但遇到问题的是我需要添加到 javascript 中，以便在单击新项目时隐藏最后一个项目的详细信息。目前，项目信息将显示新点击的信息以及上次点击的项目的信息。

HTML

<ul>
        <li><button onclick="product1()"><h4>Knee Brace L1843</h4></button></li>
        <li><button onclick="product2()"><h4>Wrist Brace L3807</h4></button></li>
        <li><button onclick="product3()"><h4>Wrist Brace</h4></button></li>
        <li><button onclick="product4()"><h4>Ankle Brace L1005</h4></button></li>
        <li><button onclick="product5()"><h4>Back Brace L0650</h4></button></li>
      </ul>

      <div id="product1info" class="hidden">
            <h2>Knee Brace L1843</h2>
            <p>Product Info</p>
        </div>

        <div id="product2info" class="hidden">
            <h2>Wrist Brace L3807</h2>
            <p>Product Info</p>
        </div>

        <div id="product3info" class="hidden">
            <h2>Wrist Brace</h2>
            <p>Product Info</p>
        </div>

        <div id="product4info" class="hidden">
            <h2>Ankle Brace L1005</h2>
            <p>Product Info</p>
        </div>

        <div id="product5info" class="hidden">
            <h2>Back Brace L0650</h2>
            <p>Product Info</p>
        </div>

JavaScript

function product1() {
    var x = document.getElementById("product1info");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}

function product2() {
    var x = document.getElementById("product2info");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";

    }
}

function product3() {
    var x = document.getElementById("product3info");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}

function product4() {
    var x = document.getElementById("product4info");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}

function product5() {
    var x = document.getElementById("product5info");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}

Answer 1

我认为最初所有产品都应该是不可见的。您不需要多个功能。只需将相应的 id 传递给函数调用即可。在函数中先将所有产品的 display 属性设置为 none，然后仅显示隐藏目标产品:

function product(x) {
  document.querySelectorAll('.hidden').forEach(function(el){
    el.style.display = "none";
  });
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

.hidden{
  display: none;
}

<ul>
  <li><button onclick="product(product1info)"><h4>Knee Brace L1843</h4></button></li>
  <li><button onclick="product(product2info)"><h4>Wrist Brace L3807</h4></button></li>
  <li><button onclick="product(product3info)"><h4>Wrist Brace</h4></button></li>
  <li><button onclick="product(product4info)"><h4>Ankle Brace L1005</h4></button></li>
  <li><button onclick="product(product5info)"><h4>Back Brace L0650</h4></button></li>
</ul>

<div id="product1info" class="hidden">
  <h2>Knee Brace L1843</h2>
  <p>Product Info</p>
</div>

<div id="product2info" class="hidden">
  <h2>Wrist Brace L3807</h2>
  <p>Product Info</p>
</div>

<div id="product3info" class="hidden">
  <h2>Wrist Brace</h2>
  <p>Product Info</p>
</div>

<div id="product4info" class="hidden">
  <h2>Ankle Brace L1005</h2>
  <p>Product Info</p>
</div>

<div id="product5info" class="hidden">
  <h2>Back Brace L0650</h2>
  <p>Product Info</p>
</div>