我是 jquery 的新手。我在 jquery 中创建了过滤器,我想将它们连接在一起以显示仅单击的内容。我怎么能这样做?对不起,我的英语不好。我尝试了很多小时,我已经建立了这个:
$("button").click(function() {
var show = $(this).attr('class');
$('.post').each(function(){
$(this).show();
var test = $(this).attr('class');
if (test.indexOf(show) < 0) $(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>FIRST</h2>
<div id='filter'>
<button class='all'>All</button>
<button class='1'>One</button>
<button class='2'>Two</button>
</div>
<h2>TWO</h2>
<div id='filter'>
<button class='all'>All</button>
<button class='aa'>Washington</button>
<button class='bb'>Philadelphia</button>
</div>
<br>
<div id='posts'>
<div class='all post 1 aa'>One Washington</div>
<div class='all post 1 bb'>One Philadelphia</div>
<div class='all post 2 bb'>Two Philadelphia</div>
<div class='all post 2 aa'>Two Washington</div>
<div class='all post 1 bb'>One Philadelphia</div>
<div class='all post 2 aa'>Two Washington</div>
<div class='all post 1 bb'>One Philadelphia</div>
</div>
有关每个步骤正在执行的操作的详细信息,请参阅逻辑中的注释。
$("button").click(function() {
//remove the selected class from the previously selected button
$(this).closest('.filter').find('button.selected').removeClass('selected');
//put the class on the button you clicked
$(this).addClass('selected');
//get the data-filter off of the selected buttons and join them into a selector
var filter = '.'+ $('button.selected').map(function(){
return $(this).data('filter');
}).get().join('.');
//hide all the posts, and then show those that match
$('.post').hide().filter(filter).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>FIRST</h2>
<!-- we use a class because an id cannot be repeated
and we want to select both our filters later -->
<div class='filter'>
<!-- data fields let us separate the classes from the data that
is used for the filter -->
<button data-filter='all'>All</button>
<button data-filter='1'>One</button>
<button data-filter='2'>Two</button>
</div>
<h2>TWO</h2>
<div class='filter'>
<button data-filter='all'>All</button>
<button data-filter='aa'>Washington</button>
<button data-filter='bb'>Philadelphia</button>
</div>
<br>
<div id='posts'>
<div class='all post 1 aa'>One Washington</div>
<div class='all post 1 bb'>One Philadelphia</div>
<div class='all post 2 bb'>Two Philadelphia</div>
<div class='all post 2 aa'>Two Washington</div>
<div class='all post 1 bb'>One Philadelphia</div>
<div class='all post 2 aa'>Two Washington</div>
<div class='all post 1 bb'>One Philadelphia</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句