这就是我想要排序的代码。我需要全部按钮来隐藏div退出和退出按钮＆＃34;超过1265＆＃34;单击以再次显示它。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Combination filters · Isotope Demo</title>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="../css/style.css" />
<!-- scripts at bottom of page -->
</head>
<body class="demos ">
<section id="content">
<h1>Find your topload Tester</h1>
<h3>Customize your datasheet according to your sample's dimensions</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>
<br>
<br>
<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>
<br>
<br>
<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>
<br>
<br>
<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 blue">Datasheet1</div>
<div id="data2" class="width-height-depth 645 190w 328w 328d 190d 5l">Datasheet2</div>
<div id="data3" class="width-height-depth 50l 25l 10l ">Datasheet3</div>
<div id="exit" class="width-height-depth 1265">This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements</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: '#data1,#data2 , #data3'
});
// 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;
});
});
</script>
<footer>
<p>If you cant find what you are looking for blah blah blah....</p>
</footer>
</section> <!-- #content -->
</body>
</html>
我尝试过你的解决方案。它几乎工作，但当我压制超过1265＆＃34;按钮文本不再出现。似乎应用了display：none属性。
答案 0 :(得分：0)
如果删除的含义是隐藏，则非常简单。
首先，点击“全部”按钮绑定处理程序，这将隐藏所述元素。
然后在更改select元素时绑定另一个处理程序。检查您的值是否合适，然后显示。
您的代码如下所示：
$('button').on('click', function(){
$('#exit').hide();
});
$('select').on('change', function(){
if( $(this).val() === '{your-appropriate-value}' ) $('#exit').show();
});
由于您编辑了问题，我将为您提供更具体的答案。对于将来可能会搜索类似内容的人，我会保留一般性答案。
为了做你想做的事，你需要在上面的代码中改变的是：
将点击功能绑定到a#all。
将您的第二个功能绑定到.filter a，然后检查是否合适并显示。说实话，这根本不是必需的，您可以将它绑定到您的特定元素（#filter-height-1265），因为您的所有元素都有id。不过，我会给你一个更一般的答案，所以如果你需要调整它，你就得到了要点。
此外，在这种情况下，您可能希望功能为return false。
您的代码如下所示：
$('a#all').on('click', function(){
$('#exit').hide();
return false;
});
$('.filter a').on('click', function(){
if( $(this).data('filter-value') == '.1265' ) $('#exit').show();
return false;
});