Question

我正在为我的网站创建一个音乐库，我想知道是否有可能使用jquery制作可点击的过滤器。就像我给“X”数量的Divs音乐ID和“x”数量的div和ID“视频”但它们没有特定的顺序我如何使用onClick函数过滤掉一个或另一个...因此，如果我制作一个菜单上显示音乐和视频，并且两者都是可点击的链接，是否可以点击“音乐”按钮或链接并隐藏所有ID为VIdeo的元素？

我希望我说得对。我正在尝试创建一个我想要响应的唱片库，所以我的HTML看起来像这样

仅供参考我正在使用自举网格系统

<div class="container-fluid">
  <!--This is the filter menu-->
   <div class="well">
      Filters Catagory<br><b><a href="#">All</a> <a href="#">Music <a href="#">Videos</a> <a href="#">Singles</a> </b>
  </div>

<!--end of the filter menu-->

<!--Filterable content-->
 <div id="music">ImG SRC HERE</div>
<div id="music">ImG SRC HERE</div>
<div id="music">ImG SRC HERE</div>
<div id="music">ImG SRC HERE</div>
<div id="videos">ImG SRC HERE</div>
<div id="video">ImG SRC HERE</div>


<div id="video">ImG SRC HERE</div>
<div id="music">ImG SRC HERE</div>
<div id="video">ImG SRC HERE</div>
<div id="music">ImG SRC HERE</div>


<div id="music">ImG SRC HERE</div>
<div id="music">ImG SRC HERE</div>

</div>

Answer 1

为两种类型提供类型的公共类和类：

<div class="media music">ImG SRC HERE</div>
<div class="media videos">ImG SRC HERE</div>

然后在您的链接上使用属性声明类型

<a href="#" class="filter_link" data-filter="all">All</a> 
<a href="#" class="filter_link" data-filter="music">Music</a> 
<a href="#" class="filter_link" data-filter="videos">Videos</a>

现在在点击处理程序

中一起使用属性和类

// cache collection of elements so only one dom search needed
var $mediaElements = $('.media');

$('.filter_link').click(function(e){
    e.preventDefault();
    // get the category from the attribute
    var filterVal = $(this).data('filter');

    if(filterVal === 'all'){
      $mediaElements.show();
    }else{
       // hide all then filter the ones to show
       $mediaElements.hide().filter('.' + filterVal).show();
    }
});

Answer 2

首先，id是唯一的，所以你想要切换到类。之后，执行以下操作：

function filter(class) {
    $('div').not('.' + class).hide();
}

单击过滤器时调用此函数。这将允许您为所有这些功能使用相同的功能，只需传递您想要专门过滤的类

Answer 3

您的链接中有拼写错误。您忘了关闭音乐链接标记。

id应该是唯一的，因此您不能拥有带有id音乐或视频的多个元素，但如果您使用的是类，则很容易修复

＆＃13;

$(function(){
  $('#all').click(function(){
    $('.item').show();
    return false;
  });
  
  $('#music').click(function(){
    $('.item').show();
    $('.item').not('.music').hide();
    return false;
  });
  
  $('#videos').click(function(){
    $('.item').show();
    $('.item').not('.video').hide();
    return false;
  });
  
  $('#singles').click(function(){
    $('.item').show();
    $('.item').not('.single').hide();
    return false;
  });
});

＆＃13;

div.music::after {
  content: ' --music';
  color: red;
  font-weight: bold;
}

div.video::after {
  content: ' --video';
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <!--This is the filter menu-->
  <div class="well">
    Filters Catagory
    <br>
    <b>
      <a id="all" href="#">All</a>
      <a id="music" href="#">Music</a>
      <a id="videos" href="#">Videos</a>
      <a id="singles" href="#">Singles</a>
    </b>
  </div>

  <!--end of the filter menu-->

  <!--Filterable content-->
  <div class="music item">ImG SRC HERE</div>
  <div class="music item">ImG SRC HERE</div>
  <div class="music item">ImG SRC HERE</div>
  <div class="music item">ImG SRC HERE</div>
  <div class="video item">ImG SRC HERE</div>
  <div class="video item">ImG SRC HERE</div>


  <div class="video item">ImG SRC HERE</div>
  <div class="music item">ImG SRC HERE</div>
  <div class="video item">ImG SRC HERE</div>
  <div class="music item">ImG SRC HERE</div>


  <div class="music item">ImG SRC HERE</div>
  <div class="music item">ImG SRC HERE</div>

</div>

＆＃13;

我还在CodePen创建了demo。

这可能是一种更有效的解决方案，但这很有效。您最好使用<button>元素而不是链接。

我添加的CSS只是为了让我更容易看到/确认发生了什么。

如何按库的ID过滤div元素

3 个答案: