javascript - 根据价格过滤

Question

我正在尝试使用 jQuery 过滤我的产品。定价低/高。我已经成功地做到了，但是一旦我点击过滤器，我的产品就会失去定位，我不完全确定为什么。他们去最大宽度并且完全忽略他们的引导类。

下面的示例代码：

点击链接，你会明白我的意思。有任何想法吗？

var ascending = false;

$('.tab-content').on('click', '.sortByPrice', function() {

  var sorted = $('.results-row').sort(function(a, b) {
    return (ascending ==
      (convertToNumber($(a).find('.price').html()) <
        convertToNumber($(b).find('.price').html()))) ? 1 : -1;
  });
  ascending = ascending ? false : true;

  $('.results').html(sorted);
});

var convertToNumber = function(value) {
  return parseFloat(value.replace('$', ''));
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="tab-content">
  <div id="filters">
    <p>
      <a class="sortByPrice" href="#">Sort by Price</a>
    </p>
  </div>
</div>

<div class="results">
  <div class="container-fluid">
    <div class="row mb-4">
      <div class="col-md-3">
        <div class="results-row">
          <figure class="card card-product">
            <div class="img-wrap item"><img src="http://kb4images.com/Random-Image/number-148116.html">
            </div>
            <figcaption class="info-wrap">
              <h4 class="title">Good product</h4>
              <p class="desc">Some small description goes here</p>
            </figcaption>
            <div class="bottom-wrap">
              <a href="" class="btn btn-sm btn-primary float-right">Order Now</a>
              <div class="price-wrap h5">
                <span class="price-new price">$1280</span> <del class="price-old">$1980</del>
              </div>
              <!-- price-wrap.// -->
            </div>
            <!-- bottom-wrap.// -->
          </figure>
        </div>
        <!-- col // -->
      </div>
      <div class="col-md-3">
        <div class="results-row">
          <figure class="card card-product">
            <div class="img-wrap item"><img src="http://kb4images.com/Random-Image/number-148116.html">
            </div>
            <figcaption class="info-wrap">
              <h4 class="title">Good product</h4>
              <p class="desc">Some small description goes here</p>
            </figcaption>
            <div class="bottom-wrap">
              <a href="" class="btn btn-sm btn-primary float-right">Order Now</a>
              <div class="price-wrap h5">
                <span class="price-new price">$1080</span> <del class="price-old">$1980</del>
              </div>
              <!-- price-wrap.// -->
            </div>
            <!-- bottom-wrap.// -->
          </figure>
        </div>
      </div>
      <!-- col // -->
    </div>
    <!-- row.// -->
  </div>
</div>
<!--container.//-->

Answer 1

这将起作用，您使用了错误的选择器，并替换了 bootstrap .container-fluid和.row-mb-4所需的两个 div ：

我还更改了选择器以减少混淆和源，我称之为.product和结果 div 与引导类称为.results：

var ascending = false;

$('.tab-content').on('click', '.sortByPrice', function() {

  var sorted = $('.product').sort(function(a, b) {
    return (ascending ==
      (convertToNumber($(a).find('.price').html()) <
        convertToNumber($(b).find('.price').html()))) ? 1 : -1;
  });
  ascending = ascending ? false : true;

  $('.results').html(sorted);
});

var convertToNumber = function(value) {
  return parseFloat(value.replace('$', ''));
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="tab-content">
  <div id="filters">
    <p>
      <a class="sortByPrice" href="#">Sort by Price</a>
    </p>
  </div>
</div>

<div>
  <div class="container-fluid">
    <div class="row mb-4 results">
      <div class="col-md-3 product">
        <div>
          <figure class="card card-product">
            <div class="img-wrap item"><img src="http://kb4images.com/Random-Image/number-148116.html">
            </div>
            <figcaption class="info-wrap">
              <h4 class="title">Good product</h4>
              <p class="desc">Some small description goes here</p>
            </figcaption>
            <div class="bottom-wrap">
              <a href="" class="btn btn-sm btn-primary float-right">Order Now</a>
              <div class="price-wrap h5">
                <span class="price-new price">$1280</span> <del class="price-old">$1980</del>
              </div>
              <!-- price-wrap.// -->
            </div>
            <!-- bottom-wrap.// -->
          </figure>
        </div>
        <!-- col // -->
      </div>
      <div class="col-md-3 product">
        <div>
          <figure class="card card-product">
            <div class="img-wrap item"><img src="http://kb4images.com/Random-Image/number-148116.html">
            </div>
            <figcaption class="info-wrap">
              <h4 class="title">Good product</h4>
              <p class="desc">Some small description goes here</p>
            </figcaption>
            <div class="bottom-wrap">
              <a href="" class="btn btn-sm btn-primary float-right">Order Now</a>
              <div class="price-wrap h5">
                <span class="price-new price">$1080</span> <del class="price-old">$1980</del>
              </div>
              <!-- price-wrap.// -->
            </div>
            <!-- bottom-wrap.// -->
          </figure>
        </div>
      </div>
      <!-- col // -->
    </div>
    <!-- row.// -->
  </div>
</div>
<!--container.//-->

Answer 2

改变这个

$('.results-row').sort(function(a, b)

到

$('.col-md-3').sort(function(a, b)

由于您正在排序results-row，我相信您正在删除col-md-3与它相关的一些 css 的 div（.results-row 的父级）。

var ascending = false;

$('.tab-content').on('click', '.sortByPrice', function() {

  var sorted = $('.col-md-3').sort(function(a, b) {
    return (ascending ==
      (convertToNumber($(a).find('.price').html()) <
        convertToNumber($(b).find('.price').html()))) ? 1 : -1;
  });
  ascending = ascending ? false : true;

  $('.results').html(sorted);
});

var convertToNumber = function(value) {
  return parseFloat(value.replace('$', ''));
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="tab-content">
  <div id="filters">
    <p>
      <a class="sortByPrice" href="#">Sort by Price</a>
    </p>
  </div>
</div>

<div class="results">
  <div class="container-fluid">
    <div class="row mb-4">
      <div class="col-md-3">
        <div class="results-row">
          <figure class="card card-product">
            <div class="img-wrap item"><img src="http://kb4images.com/Random-Image/number-148116.html">
            </div>
            <figcaption class="info-wrap">
              <h4 class="title">Good product</h4>
              <p class="desc">Some small description goes here</p>
            </figcaption>
            <div class="bottom-wrap">
              <a href="" class="btn btn-sm btn-primary float-right">Order Now</a>
              <div class="price-wrap h5">
                <span class="price-new price">$1280</span> <del class="price-old">$1980</del>
              </div>
              <!-- price-wrap.// -->
            </div>
            <!-- bottom-wrap.// -->
          </figure>
        </div>
        <!-- col // -->
      </div>
      <div class="col-md-3">
        <div class="results-row">
          <figure class="card card-product">
            <div class="img-wrap item"><img src="http://kb4images.com/Random-Image/number-148116.html">
            </div>
            <figcaption class="info-wrap">
              <h4 class="title">Good product</h4>
              <p class="desc">Some small description goes here</p>
            </figcaption>
            <div class="bottom-wrap">
              <a href="" class="btn btn-sm btn-primary float-right">Order Now</a>
              <div class="price-wrap h5">
                <span class="price-new price">$1080</span> <del class="price-old">$1980</del>
              </div>
              <!-- price-wrap.// -->
            </div>
            <!-- bottom-wrap.// -->
          </figure>
        </div>
      </div>
      <!-- col // -->
    </div>
    <!-- row.// -->
  </div>
</div>
<!--container.//-->