使用jQuery对产品价格进行排序

Question

我已经使用jquery创建了价格排序功能，我可以对价格进行排序，但是获取的结果没有以正确的方式显示，我得到的结果将重复

<select class="form-control" name="price-sorting">
   <option value="l2h">Low - High Price</option>
   <option value="h2l">High - Low Price</option>
</select> 


      <!-- Products Grid-->
<div class="isotope-grid cols-3 mb-2">

<?php foreach($data['shops'] as $shop) : ?> 


      <div class="grid-item">
        <div class="product-card"  data-price="<?php echo $shop->product_price; ?>">
          <a class="product-thumb" href="<?php echo URLROOT; ?>/shops/show/<?php echo $shop->product_id; ?>">
          <img src="<?php echo URLROOT;?>/img/product/<?php echo $shop->product_img1; ?>" alt="<?php echo $shop->product_title; ?>"></a>
            <h3 class="product-title"><a href="<?php echo URLROOT; ?>/shops/show/<?php echo $shop->product_id; ?>"><?php echo $shop->product_title; ?></a></h3>
              <h4 class="product-price">OMR <?php echo $shop->product_price; ?></h4>
              <div class="product-buttons">
                <button class="btn btn-outline-secondary btn-sm btn-wishlist" data-toggle="tooltip" title="Whishlist"><i class="icon-heart"></i></button>
                <a href="<?php echo URLROOT; ?>/shops/show/<?php echo $shop->product_id; ?>" class="btn btn-outline-primary btn-sm" data-toast data-toast-type="success" data-toast-position="topRight" data-toast-icon="icon-circle-check" data-toast-title="Product" data-toast-message="successfuly added to cart!">Add to Cart</a>
              </div>
          </div>
      </div>
  <?php endforeach; ?>
 </div>

 <script type="text/javascript">
 $(document).on("change", ".form-control", function() {

 var sortingMethod = $(this).val();

 if(sortingMethod == 'l2h')
 {
  sortProductsPriceAscending();
 }
 else if(sortingMethod == 'h2l')
 {
  sortProductsPriceDescending();
  }

  });
 function sortProductsPriceAscending()
  {
  var products = $('.grid-item');
  products.sort(function(a, b){ return 
 $(a).data("price")-$(b).data("price")});
 $(".isotope-grid").html(products);

 }

   function sortProductsPriceDescending()
   {
   var products = $('.grid-item');
     products.sort(function(a, b){ return $(b).data("price") - 
      $(a).data("price")});
   $(".isotope-grid").html(products);

  }


  </script>

这是以网格格式显示的主页

这是我对任何价格进行排序后得到的结果，它将显示结果，但将重复两次

Answer 1

通过更改对网格项目的排序，您必须更改排序逻辑以找到嵌套的产品卡，以便获得比较的价格。

function sortProductsPriceAscending() {
  // change variable name, so it's clear what it contains
  var gridItems = $('.grid-item');

  gridItems.sort(function(a, b){
    // we are sorting the gridItems, but we are sorting them on the nested
    // product card prices.  So we have to find the nested product card
    // to get the price off of
    return $('.product-card', a).data("price") - $('.product-card', b).data("price");
  });

  // when you put the grid items back on the container, just append them rather
  // than using html().  Append will just move them.
  $(".isotope-grid").append(gridItems);
}

$(document).on("change", ".form-control", function() {
  var sortingMethod = $(this).val();
  
  if(sortingMethod == 'l2h') {
    sortProductsPriceAscending();
  } else if (sortingMethod == 'h2l') {
    sortProductsPriceDescending();
  }
});

function sortProductsPriceAscending() {
  var gridItems = $('.grid-item');

  gridItems.sort(function(a, b) {
    return $('.product-card', a).data("price") - $('.product-card', b).data("price");
  });

  $(".isotope-grid").append(gridItems);
}

function sortProductsPriceDescending() {
  var gridItems = $('.grid-item');

  gridItems.sort(function(a, b) {
    return $('.product-card', b).data("price") - $('.product-card', a).data("price");
  });

  $(".isotope-grid").append(gridItems);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="price-sorting">
  <option value="l2h">Low - High Price</option>
  <option value="h2l">High - Low Price</option>
</select>

<div class="isotope-grid cols-3 mb-2">
  <div class="grid-item">
    <div class="product-card" data-price="1.00">$1.00</div>
  </div>
  <div class="grid-item">
    <div class="product-card" data-price="10.00">$10.00</div>
  </div>
  <div class="grid-item">
    <div class="product-card" data-price="5.00">$5.00</div>
  </div>
</div>