jquery - 如何使用 jquery 通过单击复选框对元素列表进行排序？

Question

我有以下元素列表，我使用 jquery 按例如(最佳评级、最低订单等)对它们进行排序

当我按评分对元素进行排序时，它工作得很好，因为我在列表顶部获得了评分最高的元素。 我的问题是当我尝试按最小订购量对元素进行排序时。我想获得列表顶部的最低价格。

看看下面我的代码:

jQuery.fn.reverse = [].reverse;

var sl = $('.storesList')
  
sl.children().reverse().each(function(i) {
  $(this).data({
    original: i + 1,
    rating: +$(".rating", this).text().replace(/[^\d\.]/g, ""),
     minimumorder: +$(".minorder", this).text().replace(/[^\d\.]/g, ""),
    open: $(".open-or-close-tag", this).text() === "CLOSE" ? 0 : 1
  })

})


$('#count').text($('.storesList  .store-block:visible').length);
$(".checkboxes-area").change(function() {
  var byRate = $("#by-rate").prop("checked")
  var isOpen = $("#stores-open-now").prop("checked")
  var byminOrder = $("#by-minimum-order").prop("checked")
  var s = sl.children().get().sort(function(a, b) {
    var aSort = key(a),
        bSort = key(b)
    return aSort < bSort ? 1 : aSort === bSort ? 0 : -1
  })
  $(sl).append(s)


  function key(el) {
    var res = $(el).data("original") * 0.00001
    if (byRate) res = $(el).data("rating")
    if (byminOrder) res = $(el).data("minimumorder")
    if (isOpen) res *= $(el).data("open")
    return res
  }
})

.storesList {
  margin-top: 20px;
}

#count {
  display: inline-block;
}

.store-block {
  width: 80%;
  margin-bottom: 10px;
  padding: 5px;
  background: #e5e5e5;
  position: relative;
  overflow: hidden;
}

.rating {
  position: absolute;
  right: 70px;
  top: 3px;
}

.minorder {
  position: absolute;
  right: 180px;
  top: 3px;  
}

.open-or-close-tag {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 11px;
  font-weight: bold;
  color: blue;
}

.right {
  float: right;
}

.left {
  float: left;
}

.hide-me {
  display: none;
}

.checkbox-lab {
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="checkboxes-area">
  <label class="checkbox-lab"><span>OPEN FIRST</span>
 <input type="checkbox" id="stores-open-now">
</label>


<label class="checkbox-lab"><span>BEST RATED</span>
<input type="checkbox" id="by-rate">
</label>

<label class="checkbox-lab"><span>BY MINIMUM ORDER</span>
<input type="checkbox" id="by-minimum-order">
</label>



</div>


<div class="storesList">

  <div class="store-block">
    <div class="store-name">Apple Store</div>
    <div class="rating">&bigstar; 4.5</div>
    <div class="minorder">100 €</div>
    <div class="open-or-close-tag">CLOSE</div>
  </div>

  <div class="store-block">
    <div class="store-name">Nokia Store</div>
    <div class="rating">&bigstar; 3.8</div>
    <div class="minorder">250 €</div>
    <div class="open-or-close-tag">OPEN</div>
  </div>

  <div class="store-block">
    <div class="store-name">Samsung Store</div>
    <div class="rating">&bigstar; 4.0</div>
    <div class="minorder">25 €</div>
    <div class="open-or-close-tag">CLOSE</div>
  </div>

  <div class="store-block">
    <div class="store-name">Linux</div>
    <div class="rating">&bigstar; 4.9</div>
    <div class="minorder">50 €</div>
    <div class="open-or-close-tag">OPEN</div>
  </div>



</div>

Answer 1

降序排序的原因是排序调用中的比较函数为 aSort < bSort 返回正数 (+1) ，这适用于“首先打开”和“最佳评级”，但不适用于“按最低订单”。所有需要更改的是，您需要像此处代码的修改版本一样为 minimumorder 返回负数(关键方法已修改为返回负数)。您将需要通过更改某些条件来修复组合方案，例如，如果您想要先开仓和最小订单，它们现在无法一起使用。如果您需要更多帮助，请告诉我。

jQuery.fn.reverse = [].reverse;

var sl = $('.storesList')

sl.children().reverse().each(function(i) {
  $(this).data({
    original: i + 1,
    rating: +$(".rating", this).text().replace(/[^\d\.]/g, ""),
     minimumorder: +$(".minorder", this).text().replace(/[^\d\.]/g, ""),
    open: $(".open-or-close-tag", this).text() === "CLOSE" ? -1 : 1
  })
})

var slByOrderAmount = $.makeArray(sl.children().map(function(index, el){
  return $(el).data("minimumorder");
})).sort(function(a, b){return a - b}).reverse();

//console.log(slByOrderAmount);

$('#count').text($('.storesList  .store-block:visible').length);
$(".checkboxes-area").change(function() {
  var byRate = $("#by-rate").prop("checked");
  var isOpen = $("#stores-open-now").prop("checked");
  var byminOrder = $("#by-minimum-order").prop("checked");
  //console.log("ByRate = " + byRate + ", ByMinOrder = " + byminOrder + ", IsOpen = " + isOpen);
  sl.children().each(function(){
    var $this = $(this);
    //console.log("Name: " + $this.find(".store-name").html() + ", Original: " + $this.data("original") + ", Rating: " + $this.data("rating") + ", MinOrder: " + $this.data("minimumorder") + ", Open: " + $this.data("open") + ", Result: " + key(this));
  });
  var s = sl.children().get().sort(function(a, b) {
    var aSort = key(a),
        bSort = key(b)
    return aSort < bSort ? 1 : aSort === bSort ? 0 : -1
  });
  $(sl).append(s);


  function key(el) {
   var $el = $(el);
    var res = 1;
    if (byRate == true) res = $el.data("rating");
    if (byminOrder == true) res = slByOrderAmount.indexOf($el.data("minimumorder"));
    if (isOpen == true) res *= $el.data("open");
    res += $el.data("original") * 0.00001;
    return res;
  }
})

.storesList {
  margin-top: 20px;
}

#count {
  display: inline-block;
}

.store-block {
  width: 80%;
  margin-bottom: 10px;
  padding: 5px;
  background: #e5e5e5;
  position: relative;
  overflow: hidden;
}

.rating {
  position: absolute;
  right: 70px;
  top: 3px;
}

.minorder {
  position: absolute;
  right: 180px;
  top: 3px;  
}

.open-or-close-tag {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 11px;
  font-weight: bold;
  color: blue;
}

.right {
  float: right;
}

.left {
  float: left;
}

.hide-me {
  display: none;
}

.checkbox-lab {
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="checkboxes-area">
  <label class="checkbox-lab"><span>OPEN FIRST</span>
 <input type="checkbox" id="stores-open-now">
</label>


<label class="checkbox-lab"><span>BEST RATED</span>
<input type="checkbox" id="by-rate">
</label>

<label class="checkbox-lab"><span>BY MINIMUM ORDER</span>
<input type="checkbox" id="by-minimum-order">
</label>



</div>


<div class="storesList">

  <div class="store-block">
    <div class="store-name">Apple Store</div>
    <div class="rating">&bigstar; 4.5</div>
    <div class="minorder">100 €</div>
    <div class="open-or-close-tag">CLOSE</div>
  </div>

  <div class="store-block">
    <div class="store-name">Nokia Store</div>
    <div class="rating">&bigstar; 3.8</div>
    <div class="minorder">250 €</div>
    <div class="open-or-close-tag">OPEN</div>
  </div>

  <div class="store-block">
    <div class="store-name">Samsung Store</div>
    <div class="rating">&bigstar; 4.0</div>
    <div class="minorder">25 €</div>
    <div class="open-or-close-tag">CLOSE</div>
  </div>

  <div class="store-block">
    <div class="store-name">Linux</div>
    <div class="rating">&bigstar; 4.9</div>
    <div class="minorder">50 €</div>
    <div class="open-or-close-tag">OPEN</div>
  </div>



</div>