切换，当我点击不同的标签时，如何通过切换来过滤数据？如何组合多次点击？

Question

我创建了一个显示歌曲数据的项目，我通过Mlab动态获取它们。当你打开页面时，你可以看到所有的歌曲，之后你通过点击所需的li列表进行过滤。

有两个问题：

1. 当我点击id =＆＃34; check_female＆＃34;时如何显示JUST女性。不是（）不在这里工作。

2. 当我点击女性和摇滚时，我可以看到由女性和摇滚歌曲类型演唱的歌曲。我怎样才能使联盟适用于所有人？

   <ul>
       <li id="check_female">  Female</li>
       <li id="check_male"> Men </li>
       <li id="check_band"> Band </li>
   </ul> 
   <ul>
       <li id="check_rock"> Rock </li>
       <li id="check_pop"> Pop </li>
   </ul>
   

歌曲性别：

$('#check_male').on('click',function() {
       $('div[data-gender ="male"]').slideToggle("fast");
});

$('#check_female').on('click',function() {
        $('div[data-gender="female"]').slideToggle("fast");      
});

$('#check_band').on('click',function() {
        $('div[data-gender="band"]').slideToggle("fast");
});

歌曲类型：

$('#check_pop').on('click',function() {
        $('div[data-category="pop"]').slideToggle("fast");
});
 //if user chosing to show ROCK img by clicking
$('#check_rock').on('click',function() {
        $('div[data-category="rock"]').slideToggle("fast");
});