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

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

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，然后show hide仅显示目标产品：

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 - 在新点击时显示/隐藏重置

4 个答案: