javascript - 点击隐藏div信息 [英] javascript - Hide div info on click
问题描述
我有一个滑块产品列表,分为3类。单击产品时,将显示产品说明。单击新产品时,将隐藏旧产品说明并显示新产品说明。
I have a list of products in a slider broken into 3 categories. When you click on a product, the product description appears. When you click on a new product, the old product description hides and the new product description appears.
我的问题是当您更改我希望前面的描述关闭的类别时,因此在您单击新产品之前不会显示任何描述。目前,在点击新产品之前,产品描述仍显示最后一个产品的最后一个产品。
My problem is when you change the categories I want the previous description to close and so that no descriptions are shown until you click a new product. Currently the product description is still showing of the last product from the last category until a new product is clicked.
我试图为此部分编写javascript但失败了。有人可以帮忙吗?
I tried to write the javascript for this portion but failed. Can anyone help?
javascript(前10行是工作代码):
The javascript (the first 10 lines are the working code):
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错误。
I believe you are writing the product function for all your onclicks wrong.
您使用函数名称中包含的数字编写所有onclick函数:
You write all your onclick functions with the number included in the function name:
<li><button onclick="product1()"><h4>Knee Brace L1843</h4></button></li>
根据您给定的代码,没有其他带有数字的产品功能,这就是问题所在。
Based on your given code there are no other product functions with numbers with them so that is the problem.
由于你的产品函数采用参数x并修改了它的显示,我认为你应该将元素本身传递给参数
Since your product function takes a parameter x and modifies the display of it, I think you should be passing in the element itself into the parameter
所以不是这样:
<li><button onclick="product1()"><h4>Knee Brace L1843</h4></button></li>
你应该这样写:
<li><button onclick="product(this)"><h4>Knee Brace L1843</h4></button></li>
编辑:
对不起,我似乎误解了这个问题。如果您的目的是在每次客户选择新产品类别时清除所有产品描述,那么:
Sorry, I seem to have misunderstood the question. If your purpose was to clear all product descriptions every time the client chooses a new product category then:
您可以简单地创建一个新的onclick函数来清除所有描述(I'我将使用您为产品功能执行的实现):
You can simply create a new onclick function that clears all descriptions(I'm going to use the implementation you did for your product function):
function clearAllDescriptions(){
document.querySelectorAll('.hidden').forEach(function(el){
el.style.display = "none";
});
}
然后将其分配到导航类别:
and then assign it to the navigation categories:
<a href="#" onclick="clearAllDescriptions()" id="navsliderselector">Braces</a>
<a href="#" onclick="clearAllDescriptions()" id="navsliderselector">Mobility</a>
<a href="#" onclick="clearAllDescriptions()" id="navsliderselector">Incontinence</a>
这篇关于javascript - 点击隐藏div信息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!