问题
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.
I tried to write the javascript for this portion but failed. Can anyone help?
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 = "";
}
}
);
Here's the 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>
回答1:
I believe you are writing the product function for all your onclicks wrong.
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.
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
so instead of this:
<li><button onclick="product1()"><h4>Knee Brace L1843</h4></button></li>
you should write this:
<li><button onclick="product(this)"><h4>Knee Brace L1843</h4></button></li>
EDIT:
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:
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>
回答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>来源：https://stackoverflow.com/questions/50934917/javascript-hide-div-info-on-click