我有一个如下所示的引导程序列(每行4列,也有许多行),我需要根据标签(General,Movie,Drama等)过滤这些列,类似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>

最佳答案

使用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

09-25 22:27
查看更多