使用引导程序的画廊选择器不起作用

Question

[下面是HTML，后跟名为filter.js的JavaScript文件。我正在网站上开发画廊页面，并且我认为我缺少一些选择器ID或其他内容，因为当我检查页面时，所有图片都不会更改，并且所有类别都不会起作用。请有人可以帮我看看我在想什么。谢谢

<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script src="js/filter.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" 
id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<!--Start about  area --> 
<div class="about_area">
 <div class="container">
    <div class="row">
    <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h1 class="gallery-title">Gallery</h1>
    </div>
    <div align="center">
        <button class="btn btn-default filter-button" data-filter="all">All</button>
        <button class="btn btn-default filter-button" data-filter="hdpe">HDPE Pipes</button>
        <button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button>
        <button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button>
        <button class="btn btn-default filter-button" data-filter="irrigation">Irrigation 
Pipes</button>
    </div>
    <br/>
    <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
      <img src="http://fakeimg.pl/365x365/" class="img-responsive">
   </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
      <img src="http://fakeimg.pl/365x365/" class="img-responsive">
   </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
      <img src="http://fakeimg.pl/365x365/" class="img-responsive">
   </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
     <img src="http://fakeimg.pl/365x365/" class="img-responsive">
   </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
     <img src="http://fakeimg.pl/365x365/" class="img-responsive">
   </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
     <img src="http://fakeimg.pl/365x365/" class="img-responsive">
    </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
     <img src="http://fakeimg.pl/365x365/" class="img-responsive">
   </div>

   <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
      <img src="http://fakeimg.pl/365x365/" class="img-responsive">
    </div>

    <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
      <img src="http://fakeimg.pl/365x365/" class="img-responsive">
    </div>

    <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
       <img src="http://fakeimg.pl/365x365/" class="img-responsive">
    </div>

        <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
           <img src="http://fakeimg.pl/365x365/" class="img-responsive">
        </div>

        <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
            <img src="http://fakeimg.pl/365x365/" class="img-responsive">
        </div>
    </div>
</div>
</section>

        </div>      
    </div>
</div>
<!--end about  area --> 

这是下面的JavaScript

$(document).ready(function(){
 $(".filter-button").click(function(){
    var value = $(this).attr('data-filter');        
    if(value == "all")
    {
        // $('.filter').removeClass('hidden');
        $('.filter').show('1000');
    }else{
    // $('.filter[filter-item="'+value+'"]').removeClass('hidden');
    //  $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
        $(".filter").not('.'+value).hide('3000');
        $('.filter').filter('.'+value).show('3000');
        }
     });

    if ($(".filter-button").removeClass("active")) {
       $(this).removeClass("active");
    }
    $(this).addClass("active");
});

Answer 1

“有人可以发现错误吗？”在您发布的代码中没有没有，只要确保您的bootstrap和jquery工作正常即可。其余的似乎工作正常，我更改了图像，以便您可以看到代码正在工作

$(document).ready(function() {
  $(".filter-button").click(function() {
    var value = $(this).attr("data-filter");
    if (value == "all") {
      // $('.filter').removeClass('hidden');
      $(".filter").show("1000");
    } else {
      // $('.filter[filter-item="'+value+'"]').removeClass('hidden');
      //  $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
      $(".filter")
        .not("." + value)
        .hide("3000");
      $(".filter")
        .filter("." + value)
        .show("3000");
    }
  });

  if ($(".filter-button").removeClass("active")) {
    $(this).removeClass("active");
  }
  $(this).addClass("active");
});

<!DOCTYPE html>
<html lang="en">
  <head>
 
    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
    <style>
      img {
        width: 365px;
        height: 365px;
      }
    </style>
  </head>
  <body>
    <div class="about_area">
      <div class="container">
        <div class="row">
          <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h1 class="gallery-title">Gallery</h1>
          </div>
          <div align="center">
            <button class="btn btn-default filter-button" data-filter="all">
              All
            </button>
            <button class="btn btn-default filter-button" data-filter="hdpe">
              HDPE Pipes
            </button>
            <button
              class="btn btn-default filter-button"
              data-filter="sprinkle"
            >
              Sprinkle Pipes
            </button>
            <button class="btn btn-default filter-button" data-filter="spray">
              Spray Nozzle
            </button>
            <button
              class="btn btn-default filter-button"
              data-filter="irrigation"
            >
              Irrigation Pipes
            </button>
          </div>
          <br />
          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
          >
            <img
              src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
          >
            <img
              src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
          >
            <img
              src="https://www.fastflowpipes.com/wp-content/uploads/2014/10/19737_HDPE-PIPES.jpg"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
          >
            <img
              src="https://apollo-singapore.akamaized.net/v1/files/xbjlgpzdkcfh3-PK/image;s=850x0"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
          >
            <img
              src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
          >
            <img
              src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
          >
            <img
              src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
          >
            <img
              src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
          >
            <img
              src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
          >
            <img
              src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
          >
            <img
              src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg/"
              class="img-responsive"
            />
          </div>

          <div
            class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
          >
            <img
              src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
              class="img-responsive"
            />
          </div>
        </div>
      </div>
    </div>

    <!--end about  area -->
    <!--The JS File -->
    <script src="./index.js"></script>
  </body>
</html>