我有以下项目列表,我使用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">★ 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">★ 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">★ 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">★ 4.9</div>
<div class="minorder">50 €</div>
<div class="open-or-close-tag">OPEN</div>
</div>
</div>
发布于 2018-09-10 06:28:17
它按降序排序的原因是排序调用中的比较函数为aSort < bSort
返回正(+1),这对于"Open first“和"Best rated”都很好,但对于"By minimum order“就不行了。所有需要更改的是,您需要在修改后的代码版本中为minimumorder返回负值amount (key method已被修改为返回负值)。您需要通过更改某些条件来修复组合方案,例如,如果您想同时使用Open first和minimum order,这两个条件现在不会一起工作。如果你需要更多的帮助,请告诉我。
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">★ 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">★ 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">★ 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">★ 4.9</div>
<div class="minorder">50 €</div>
<div class="open-or-close-tag">OPEN</div>
</div>
</div>
https://stackoverflow.com/questions/52248923
复制相似问题