Javascript 不同数据过滤器的过滤方法

Question

我刚开始学习javascript。我在从数据库中获取价值时遇到过滤产品的问题。我的 javascript 代码如下：

  `var $grids = $(".grid").isotope({
    itemSelector : '.grid-item',
    layoutMode : 'fitRows'
});

$(".button-group").on("click", "button", function(){
    var filterValue = $(this).attr('data-filter');
    
    $grids.isotope({ filter: filterValue});
})

我的 php 代码如下：

 <div id="filters" class="button-group text-end">
      <button class="btn" data-filter="*">All Categories</button>
      <button class="btn" data-filter=".clothes">Clothes</button>
      <button class="btn" data-filter=".samsung">Phones</button>
      <button class="btn" data-filter=".electronics">Electronics</button>
    </div>
    
    <div class="grid">
    <?php 
            while($row = mysqli_fetch_array($result2)) {
              
              ?>
      <div  class="grid-item border border-warning " <?php echo " {$row['item_brand']}";   ?> >
        <div class="item py-1" style="width: 200px;">
        
        
          <a href=""><img class="img-fluid m-1 bg-light"  src=" <?php echo " {$row['item_image']}";   ?>" alt="Calli"></a> 
          <div class="text-center">
              <h6>Mobile</h6>
              <div class="rating text-warning">
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="far fa-star"></i></span>
              </div>
              <div class="price">
                3
              </div>
              <button class="btn btn-warning">Add to Cart</button>
          
       </div>
      </div>
      </div>
      <?php 
            }
      ?>

我正在从数据库列“item-brand”中获取数据过滤器值，该值与上面数据过滤器中提到的值相同。只有所有类别都运行良好。请帮我解决这个问题。

Answer 1

请确保class例如衣服，三星在php回显时没有转义。意味着尝试

<div class="grid-item border border-warning <?php echo " {$row['item_brand']}"; ?>" > 代替 <div class="grid-item border border-warning " <?php echo " {$row['item_brand']}"; ?> >

我没有确切的 php 代码或数据库，所以不确定，但我已经创建了演示 html，如下所示，工作正常会对您有所帮助。

<div id="filters" class="button-group text-end">
      <button class="btn" data-filter="*">All Categories</button>
      <button class="btn" data-filter=".clothes">Clothes</button>
      <button class="btn" data-filter=".samsung">Phones</button>
      <button class="btn" data-filter=".electronics">Electronics</button>
    </div>
    
    <div class="grid">
   
      <div  class="grid-item border border-warning clothes" >
        <div class="item py-1" style="width: 200px;">
        
        
          <a href=""><img class="img-fluid m-1 bg-light"  src="images/Hydrangeas.jpg" alt="Calli" height="100px;"></a> 
          <div class="text-center">
              <h6>Mobile</h6>
              <div class="rating text-warning">
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="far fa-star"></i></span>
              </div>
              <div class="price">
                3
              </div>
              <button class="btn btn-warning">Add to Cart</button>
          
       </div>
      </div>
      </div>

      <div  class="grid-item border border-warning clothes" >
        <div class="item py-1" style="width: 200px;">
        
        
          <a href=""><img class="img-fluid m-1 bg-light"  src="images/Hydrangeas.jpg" alt="Calli" height="100px;"></a> 
          <div class="text-center">
              <h6>Mobile</h6>
              <div class="rating text-warning">
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="far fa-star"></i></span>
              </div>
              <div class="price">
                3
              </div>
              <button class="btn btn-warning">Add to Cart</button>
          
       </div>
      </div>
      </div>

      <div  class="grid-item border border-warning clothes" >
        <div class="item py-1" style="width: 200px;">
        
        
          <a href=""><img class="img-fluid m-1 bg-light"  src="images/Hydrangeas.jpg" alt="Calli" height="100px;"></a> 
          <div class="text-center">
              <h6>Mobile</h6>
              <div class="rating text-warning">
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="far fa-star"></i></span>
              </div>
              <div class="price">
                3
              </div>
              <button class="btn btn-warning">Add to Cart</button>
          
       </div>
      </div>
      </div>
      <div  class="grid-item border border-warning samsung" >
        <div class="item py-1" style="width: 200px;">
        
        
          <a href=""><img class="img-fluid m-1 bg-light"  src="images/Hydrangeas.jpg" alt="Calli" height="100px;"></a> 
          <div class="text-center">
              <h6>Mobile</h6>
              <div class="rating text-warning">
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="far fa-star"></i></span>
              </div>
              <div class="price">
                3
              </div>
              <button class="btn btn-warning">Add to Cart</button>
          
       </div>
      </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
      <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
      <script type="text/javascript">
  var $grids = $(".grid").isotope({
    itemSelector : '.grid-item',
    layoutMode : 'fitRows'
});

$(".button-group").on("click", "button", function(){
    var filterValue = $(this).attr('data-filter');
    
    $grids.isotope({ filter: filterValue});
})
      </script>

Javascript 不同数据过滤器的过滤方法

Javascript filter method for different data-filter

javascript

html

mysql

filter

jquery-isotope