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

【问题标题】：gallery selector using bootstrap does not work使用引导程序的画廊选择器不起作用
【发布时间】：2022-02-23 03:08:22
【问题描述】：

下面是 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");
});

【问题讨论】：

能否包含控制台的任何相关输出？
您是否尝试过在加载 bootstrap.js 文件之前确保 jquery 文件正在加载？

标签： javascript html css bootstrap-4 selector

【解决方案1】：

“谁能发现错误？”您发布的代码中至少没有 None ，只需确保您有 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>

【讨论】：

【解决方案2】：

$(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>

【讨论】：

【解决方案3】：

如何删除“全部”按钮的功能我只想显示其余类别而不是全部。默认情况下，现在应该在运行代码时显示所有图像。

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review