javascript - javascript - 点击时隐藏 div 信息
问题描述
我有一个滑块中的产品列表,分为 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>
解决方案
我相信您正在为所有 onclicks 编写错误的产品功能。
您使用函数名称中包含的数字编写所有 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>
推荐阅读
- mysql - 如何在不输入时间的情况下从两个相同的日期读取
- python - 将地理编码结果从地址保存到经度和纬度到 Python 中的原始数据框
- linux - 如何为 i386 编译静态二进制文件?
- python - 如何使用findall函数从python中的文本文件中提取特定的url
- batch-file - 如何将文本文件内容保存到临时变量中并仅在修改该文本文件时才回显它
- javascript - JavaScript 事件侦听器不适用于 if 语句
- azure - 如何使用逻辑应用中的 API 管理操作将 CSV 或 XML 数据作为正文参数传递给 API Post 操作?
- c++ - 如何更紧凑地初始化和返回向量的向量?
- php - 修复此 PHP 语法
- r - 从公司列表中,将推文流式传输到 df 中?