根据价格过滤

时间：2018-08-16 21:42:59

标签： javascript jquery css bootstrap-4

我目前正在尝试使用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.//-->

2 个答案:

答案 0 :(得分：2)

这将起作用，您使用了错误的选择器，并替换了引导 .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.//-->

答案 1 :(得分：0)

更改此

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

到

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

由于您正在对results-row进行排序，因此我相信您正在删除col-md-3 div（.results-row的父级），该div与它有一些相关的CSS。

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.//-->

相关问题
最新问题