我现在已经编辑了页面并将代码放在这里：
当我点击所有与“全部”类相关的链接时，我试图隐藏div。
我只想点击id为“all”的所有锚点来隐藏div＃container。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Combination filters ·</title>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="../css/style.css" />
</head>
<body class="demos ">
<section id="content">
<h1>Find your top-load Tester</h1>
<h3>Potential description Text</h3>
<section id="options" class="clearfix combo-filters">
<div class="option-combo height">
<h4>Height (mm)</h4>
<ul class="filter option-set clearfix " data-filter-group="height">
<li><a id="all" href="#filter-height-any" data-filter-value="*" class="selected">All</a>
<li><a href="#filter-height-525" data-filter-value=".525">525 or less</a>
<li><a href="#filter-height-645" data-filter-value=".645">645 or less</a>
<li><a href="#filter-height-1265" data-filter-value=".1265">more than 1265</a>
</ul>
</div>
<div class="option-combo width">
<h4>Width (mm)</h4>
<ul class="filter option-set clearfix " data-filter-group="width">
<li><a id="all" href="#filter-width-any" data-filter-value="" class="selected">All</a>
<li><a href="#filter-width-134" data-filter-value=".134w">134 or less</a>
<li><a href="#filter-width-190" data-filter-value=".190w">190 or less</a>
<li><a href="#filter-width-290" data-filter-value=".290w">290 or less</a>
<li><a href="#filter-width-328" data-filter-value=".328w">328 or less</a>
<li><a href="#filter-width-420" data-filter-value=".420w">420 or more</a>
</ul>
</div>
<div class="option-combo depth">
<h4>Depth (mm)</h4>
<ul class="filter option-set clearfix " data-filter-group="depth">
<li><a id="all" href="#filter-depth-any" data-filter-value="" class="selected">All</a>
<li><a href="#filter-depth-134" data-filter-value=".134d">134 or less</a>
<li><a href="#filter-depth-190" data-filter-value=".190d">190 or less</a>
<li><a href="#filter-depth-290" data-filter-value=".290d">290 or less</a>
<li><a href="#filter-depth" data-filter-value=".328d">328 or less</a>
<li><a href="#filter-depth-420" data-filter-value=".420d">420 or more</a>
</ul>
</div>
<div class="option-combo load">
<h4>Load (kN) </h4>
<ul class="filter option-set clearfix " data-filter-group="load">
<li><a id="all" href="#filter-load-any" data-filter-value="" class="selected">All</a>
<li><a href="#filter-load-2.5" data-filter-value=".2-5l">2.5 or less</a>
<li><a href="#filter-load-5" data-filter-value=".5l">5 or less</a>
<li><a href="#filter-load-10" data-filter-value=".10l">10 or less</a>
<li><a href="#filter-load-25" data-filter-value=".25l">25 or less</a>
<li><a href="#filter-load-50" data-filter-value=".50l">50 or more</a>
</ul>
</div>
</section> <!-- #options -->
<div id="container" class="clearfix">
<div id="data1" class="width-height-depth 525 134w 290w 290d 134d 2-5l">Datasheet1</div>
<div id="data2" class="width-height-depth 645 190w 328w 328d 190d 5l">Datasheet2</div>
<div id="data3" class="width-height-depth 525 50l 25l 10l 190w 328w 190d 328d 645 50l 25l 10l 134w 290w 134d 290d ">Datasheet3</div>
<div id="exit" class="width-height-depth 525 645 1265 420d 420w">This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements</div>
<div id="intro" class="width-height-depth">Please specify</div>
</div> <!-- #container -->
<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../jquery.isotope.min.js"></script>
<script>
$(function(){
var $container = $('#container'),
filters = {};
$container.isotope({
itemSelector : '.width-height-depth',
masonry: {
columnWidth: 80
},
filter: '#intro'
});
// filter buttons
$('.filter a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
var $optionSet = $this.parents('.option-set');
// change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// store filter value in object
// i.e. filters.color = 'red'
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
$('a').on('click', function(){
$('#exit').hide();
return false;
});
$('.filter a').on('click', function(){
if( $(this).data('filter-value') == '.1265' ) $('#exit').show();
return false;
});
$('.filter a').on('click', function(){
if( $(this).data('filter-value') == '.420d' ) $('#exit').show();
return false;
});
$('.filter a').on('click', function(){
if( $(this).data('filter-value') == '.420w' ) $('#exit').show();
return false;
});
$('.filter a').on('click', function(){
$('#intro').hide();
return false;
});
});
</script>
<footer>
<p>If you cant find what you are looking for blah blah blah....</p>
</footer>
</section> <!-- #content -->
</body>
</html>
提前致谢。
答案 0 :(得分：6)
$('a.all').on('click', function(event) {
var all_alls = $('a.all');
var clicked_alls = $('a.all[data-clicked="true"]');
if (all_alls.length == clicked_alls.length) {
$('#exit').hide();
}
else {
$(this).attr('data-clicked', 'true');
}
});
答案 1 :(得分：1)
标记：
<ul>
<li><a href="#" class="all">Link</a></li>
<li><a href="#" class="all">Link</a></li>
<li><a href="#" class="all">Link</a></li>
</ul>
<div id="divToHide">Click all links to hide me</div>
JS：
var $links = $('.all');
$links.click(function(e){
e.preventDefault();
$(this).addClass('.clicked');
if($links.length == $('.all.clicked').length){
$('#divToHide').hide();
}
})
答案 2 :(得分：0)
当您单击“all”类中的某个div时，可以使用.addClass添加“clicked”类。每次，您还要检查“all”类中的所有div是否也“点击”了。如果他们这样做，你可以隐藏你想隐藏的div。