javascript

Question

我有一个产品列表，当您单击该项目时，将显示该产品的信息。我有 show/hide 工作，但我遇到问题的地方是我需要添加到 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

可能有一种更简单的方法可以做到这一点，但是简而言之，您想要做的是在单击一个产品时隐藏所有其他产品，因此您必须将该逻辑添加到每个函数中：

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

Answer 2

我认为最初所有的产品都应该是不可见的。您不需要多个功能。只需将相应的 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>

Answer 3

更好的方法：

HTML:

<ul>
  <li><button onclick="displayProduct(1)"><h4>Knee Brace L1843</h4></button></li>
  <li><button onclick="displayProduct(2)"><h4>Wrist Brace L3807</h4></button></li>
  <li><button onclick="displayProduct(3)"><h4>Wrist Brace</h4></button></li>
  <li><button onclick="displayProduct(4)"><h4>Ankle Brace L1005</h4></button></li>
  <li><button onclick="displayProduct(5)"><h4>Back Brace L0650</h4></button></li>
</ul>

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

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

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

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

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

CSS:

.hidden {
  display: none;
}

.visible {
  display: block;
}

JS:

function displayProduct(index) {
  var element = document.getElementById("product" + index + "info");
  var products = document.querySelectorAll(".product");

  products.forEach(function(product) {
    product.classList.add("hidden");
    product.classList.remove("visible");
  });

  element.classList.add("visible");
}

Answer 4

这样您的产品和按钮就可以通过单一的享元函数动态生成。在按钮 dataset 属性上存储产品索引，如下所示。引用单个 toggleProductInfo() 函数。可以选择使用直接参考参数来定位 <button>，例如 onclick="toggleProductInfo( this )"

  <ul>
    <li><button data-product="1" onclick="toggleProductInfo()"><h4>Knee Brace L1843</h4></button></li>
    <li><button data-product="2" onclick="toggleProductInfo()"><h4>Wrist Brace L3807</h4></button></li>
    <li><button data-product="3" onclick="toggleProductInfo()"><h4>Wrist Brace</h4></button></li>
    <li><button data-product="4" onclick="toggleProductInfo()"><h4>Ankle Brace L1005</h4></button></li>
    <li><button data-product="5" onclick="toggleProductInfo()"><h4>Back Brace L0650</h4></button></li>
  </ul>

和JS代码

// - Keep a reference to the last product toggled (for performance, simplicity etc.)
let lastProductToggled = null

function toggleProductInfo( event ) {

    // - event parameter could be a direct reference to target <button> IF
    // <button onclick="toggleProductInfo( this )">
    var productId = "product" + event.target.dataset.product +  "info"
    var x = document.getElementById(productId);

    // - hide previous product IF not current (without looping through, and hiding all products' info only to display our target's)
    if ( null !== lastProductToggled && lastProductToggled !== productId ) {
        document.getElementById(lastProductToggled).style.display = "none"
    }

    // - toggle current product
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }

    // - save reference
    lastProductToggled = productId
}

javascript - show/hide 重新点击

javascript - show/hide reset on new click

jquery

show-hide