Bootstrap使用Javascript的列過濾器

Question

我有一個引導列如下（每行4列和許多行同樣），我需要根據標籤（一般，電影，戲劇等...）過濾列，東西像這樣http://codepen.io/bmodena/pen/Fybdu。我需要一個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> 

Answer 1

它應該很簡單，使用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> 

jsfiddle link