javascript - 点击时隐藏 div 信息

Question

我在滑块中有一个产品列表，分为 3 个类别。单击产品时，将显示产品描述。当您单击新产品时，旧产品描述会隐藏，新产品描述会出现。

我的问题是，当您更改类别时，我希望关闭之前的描述，这样在您单击新产品之前不会显示任何描述。目前，产品描述仍显示最后一个类别中的最后一个产品，直到点击新产品。

我尝试为此部分编写 javascript，但失败了。有人可以帮忙吗？

javascript（前 10 行是工作代码）：

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";
  }
}

var anav = document.querySelector('#navsliderselector');
var divprod = document.querySelector('.hidden');
button.addEventListener('click', function (event) {
      if (menu.style.display == "") {
          menu.style.display = "none";

      } else {
          menu.style.display = "";

      }
    }
  );

这是 HTML：

<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>

              <ul>
                <li><button onclick="product(product6info)"><h4>Back Brace L0650</h4></button></li>
              </ul>
               <ul>
                <li><button onclick="product(product7info)"><h4>Back Brace L0650</h4></button></li>
              </ul>

    <nav>
                <a href="#" id="navsliderselector">Braces</a>
                <a href="#" id="navsliderselector">Mobility</a>
                <a href="#" id="navsliderselector">Incontinence</a>
              </nav>

              <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 1

我相信您为所有点击次数编写的产品功能都错了。

你用函数名称中包含的数字编写所有的 onclick 函数：

<li><button onclick="product1()"><h4>Knee Brace L1843</h4></button></li>

根据您给定的代码，没有其他带有数字的产品功能，所以这就是问题所在。

由于您的产品函数采用参数 x 并修改它的显示，我认为您应该将元素本身传递给参数

所以而不是这个：

<li><button onclick="product1()"><h4>Knee Brace L1843</h4></button></li>

你应该这样写：

<li><button onclick="product(this)"><h4>Knee Brace L1843</h4></button></li>

编辑：

对不起，我似乎误解了这个问题。如果您的目的是在每次客户选择新产品类别时清除所有产品描述，那么：

您可以简单地创建一个新的 onclick 函数来清除所有描述（我将使用您为产品功能所做的实现）：

function clearAllDescriptions(){
  document.querySelectorAll('.hidden').forEach(function(el){
    el.style.display = "none";
  });
}

然后将其分配给导航类别：

<a href="#" onclick="clearAllDescriptions()" id="navsliderselector">Braces</a>
<a href="#" onclick="clearAllDescriptions()" id="navsliderselector">Mobility</a>
<a href="#" onclick="clearAllDescriptions()" id="navsliderselector">Incontinence</a>

Answer 2

function product(x) {
  $('.productDescr').hide();
  $('.productDescr[product=' + x + ']').fadeIn("fast");
}

$(document).ready(function() {
  $(document).on("click", ".categoryLink:not(.active)", function() {
    $('.categoryLink.active').removeClass("active");
    $(this).addClass("active");
    var categSel = $(this).attr("category");
    $('.categoryProducts').hide();
    $('.categoryProducts[category=' + categSel + ']').fadeIn("fast");
    $('.productDescr').hide();
  });
});

.productDescr {
display:none
}
.categoryLink {
display:inline-block;
padding:3px 5px;
background-color:lightgray;
border-radius:6px;
cursor:pointer
}
.categoryLink.active {
background-color:#07c;
color:white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<nav>
  <a class="categoryLink active" category="1">Braces</a>
  <a class="categoryLink" category="2">Mobility</a>
  <a class="categoryLink" category="3">Incontinence</a>
</nav>

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

<ul class="categoryProducts" category="2" style="display:none">
  <li><button onclick="product(6)"><h4>Back Brace L0650</h4></button></li>
</ul>
 <ul class="categoryProducts" category="3" style="display:none">
  <li><button onclick="product(7)"><h4>Back Brace L0650</h4></button></li>
</ul>

<div product="1" class="productDescr">
      <h2>Knee Brace L1843</h2>
      <p>Product Info</p>
  </div>

  <div product="2" class="productDescr">
      <h2>Wrist Brace L3807</h2>
      <p>Product Info</p>
  </div>

  <div product="3" class="productDescr">
      <h2>Wrist Brace</h2>
      <p>Product Info</p>
  </div>

  <div product="4" class="productDescr">
      <h2>Ankle Brace L1005</h2>
      <p>Product Info</p>
  </div>

  <div product="5" class="productDescr">
      <h2>Back Brace L0650</h2>
      <p>Product Info</p>
  </div>
  <div product="6" class="productDescr">
      <h2>Back Brace L0650</h2>
      <p>Product Info</p>
  </div>
  <div product="7" class="productDescr">
      <h2>Back Brace L0650</h2>
      <p>Product Info</p>
  </div>