使用Javascript的引导列过滤器_Javascript_Css_Angularjs_Html_Twitter Bootstrap

使用Javascript的引导列过滤器

javascript css angularjs html twitter-bootstrap

使用Javascript的引导列过滤器,javascript,css,angularjs,html,twitter-bootstrap,Javascript,Css,Angularjs,Html,Twitter Bootstrap,我有一个如下的引导列（每行4列，同样多行），我需要根据标签（常规、电影、戏剧等）过滤列，类似这样。我需要一个javascript来做这件事。我也可以根据需要更改HTML代码。我是JS的初学者。请帮忙 <div class="col-sm-8" style="padding-left:0px;"> <div class="panel panel-primary"> <div class="panel-heading"> <

我有一个如下的引导列（每行4列，同样多行），我需要根据标签（常规、电影、戏剧等）过滤列，类似这样。我需要一个javascript来做这件事。我也可以根据需要更改HTML代码。我是JS的初学者。请帮忙

<div class="col-sm-8" style="padding-left:0px;">

<div class="panel panel-primary">
<div class="panel-heading">
                <h1 class="panel-title" style="font-size:20px;">Things</h1>
</div><br>
<div class="panel-body">

    <div class="row" style="padding:10px;">
    <div class="col-xs-5 col-sm-3 col-md-3">
        <img src="/media/item1.jpg" class="img-responsive" alt="Image">
        <a href="/items1"><br><p><b>Item1</b></a>
    <br><span class="label label-success">Gereral</span>
    </p>
    </div>

    <div class="col-xs-5 col-sm-3 col-md-3">
        <img src="/media/item2.jpg" class="img-responsive" alt="Image">
        <a href="/items2"><br><p><b>item2</b></a>
    <br><span class="label label-success">Movie</span>
    </p>
    </div>   

    <div class="col-xs-5 col-sm-3 col-md-3">
        <img src="/media/item3.jpg" class="img-responsive" alt="Image">
        <a href="/items3"><br><p><b>items3</b></a>
    <br><span class="label label-success">Gereral</span>
    </p>
    </div>

    <div class="col-xs-5 col-sm-3 col-md-3">
        <img src="/media/item4.jpg" class="img-responsive" alt="Image">
        <a href="/items4"><br><p><b>items4</b></a>
    <br><span class="label label-success">Drama</span>
    </p>
    </div>
     </div><br>

    <div class="row">
    <div class="col-xs-5 col-sm-3 col-md-3">
        <img src="/media/item5.jpg" class="img-responsive" alt="Image">
        <a href="/items"><br><p><b>items5</b></a>
    <br><span class="label label-success">NEWS</span>
    </p>
    </div>

     </div> 

</div>
</div>


东西



通用的


电影


通用的


戏剧




新闻

使用jQuery应该很简单。使用选择器隐藏和显示

<div class="col-sm-8" style="padding-left:0px;">

  <div class="panel panel-primary">
    <div class="panel-heading">
      <h1 class="panel-title" style="font-size:20px;">Things</h1>
    </div>
    <br>
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-12">
          <button class="btn btn-info" data-set="all">All</button>
          <button class="btn btn-info" data-set="general">General</button>
          <button class="btn btn-info" data-set="movie">Movie</button>
          <button class="btn btn-info" data-set="news">News</button>
          <button class="btn btn-info" data-set="drama">Drama</button>
        </div>

      </div>
      <hr/>
      <div class="row" style="padding:10px;">
        <div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
          <img src="/media/item1.jpg" class="img-responsive" alt="Image">
          <a href="/items1">
            <br>
            <p><b>Item1</b></a>
          <br><span class="label label-success">Gereral</span>

        </div>

        <div class="col-xs-5 col-sm-3 col-md-3" data-group="movie">
          <img src="/media/item2.jpg" class="img-responsive" alt="Image">
          <a href="/items2">
            <br>
            <p><b>item2</b></a>
          <br><span class="label label-success">Movie</span>

        </div>

        <div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
          <img src="/media/item3.jpg" class="img-responsive" alt="Image">
          <a href="/items3">
            <br>
            <p><b>items3</b></a>
          <br><span class="label label-success">Gereral</span>

        </div>

        <div class="col-xs-5 col-sm-3 col-md-3" data-group="drama">
          <img src="/media/item4.jpg" class="img-responsive" alt="Image">
          <a href="/items4">
            <br>
            <p><b>items4</b></a>
          <br><span class="label label-success">Drama</span>

        </div>
      </div>
      <br>

      <div class="row">
        <div class="col-xs-5 col-sm-3 col-md-3" data-group="news">
          <img src="/media/item5.jpg" class="img-responsive" alt="Image">
          <a href="/items">
            <br>
            <p><b>items5</b></a>
          <br><span class="label label-success">NEWS</span>

        </div>

      </div>

    </div>
  </div>


<script>
$(document).ready(function(e) {
  $("[data-set]").click(function(e) {
    if (this.dataset.set == "all") {
      $("[data-group]").show();
      return false;
    }
    var $currentLists = $("[data-group=" + this.dataset.set + "]");
    $("[data-group]").not($currentLists).hide();
    $currentLists.show();
  });
});
</script>


东西


全部的
一般的
电影
新闻
戏剧


通用的

电影

通用的

戏剧



新闻
$（文档）.ready（函数（e）{
$（“[数据集]”）。单击（函数（e）{
如果（this.dataset.set==“全部”）{
$（“[数据组]”）.show（）；
返回false；
}
var$currentLists=$（“[data group=“+this.dataset.set+”]）；
$（“[数据组]”）。而不是（$CurrentList）.hide（）；
$currentLists.show（）；
});
});

使用jQuery应该很简单。使用选择器隐藏和显示

<div class="col-sm-8" style="padding-left:0px;">

  <div class="panel panel-primary">
    <div class="panel-heading">
      <h1 class="panel-title" style="font-size:20px;">Things</h1>
    </div>
    <br>
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-12">
          <button class="btn btn-info" data-set="all">All</button>
          <button class="btn btn-info" data-set="general">General</button>
          <button class="btn btn-info" data-set="movie">Movie</button>
          <button class="btn btn-info" data-set="news">News</button>
          <button class="btn btn-info" data-set="drama">Drama</button>
        </div>

      </div>
      <hr/>
      <div class="row" style="padding:10px;">
        <div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
          <img src="/media/item1.jpg" class="img-responsive" alt="Image">
          <a href="/items1">
            <br>
            <p><b>Item1</b></a>
          <br><span class="label label-success">Gereral</span>

        </div>

        <div class="col-xs-5 col-sm-3 col-md-3" data-group="movie">
          <img src="/media/item2.jpg" class="img-responsive" alt="Image">
          <a href="/items2">
            <br>
            <p><b>item2</b></a>
          <br><span class="label label-success">Movie</span>

        </div>

        <div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
          <img src="/media/item3.jpg" class="img-responsive" alt="Image">
          <a href="/items3">
            <br>
            <p><b>items3</b></a>
          <br><span class="label label-success">Gereral</span>

        </div>

        <div class="col-xs-5 col-sm-3 col-md-3" data-group="drama">
          <img src="/media/item4.jpg" class="img-responsive" alt="Image">
          <a href="/items4">
            <br>
            <p><b>items4</b></a>
          <br><span class="label label-success">Drama</span>

        </div>
      </div>
      <br>

      <div class="row">
        <div class="col-xs-5 col-sm-3 col-md-3" data-group="news">
          <img src="/media/item5.jpg" class="img-responsive" alt="Image">
          <a href="/items">
            <br>
            <p><b>items5</b></a>
          <br><span class="label label-success">NEWS</span>

        </div>

      </div>

    </div>
  </div>


<script>
$(document).ready(function(e) {
  $("[data-set]").click(function(e) {
    if (this.dataset.set == "all") {
      $("[data-group]").show();
      return false;
    }
    var $currentLists = $("[data-group=" + this.dataset.set + "]");
    $("[data-group]").not($currentLists).hide();
    $currentLists.show();
  });
});
</script>


东西


全部的
一般的
电影
新闻
戏剧


通用的

电影

通用的

戏剧



新闻
$（文档）.ready（函数（e）{
$（“[数据集]”）。单击（函数（e）{
如果（this.dataset.set==“全部”）{
$（“[数据组]”）.show（）；
返回false；
}
var$currentLists=$（“[data group=“+this.dataset.set+”]）；
$（“[数据组]”）。而不是（$CurrentList）.hide（）；
$currentLists.show（）；
});
});