我有以下项目列表,我使用 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>
它按降序排序的原因是排序调用中的比较函数为 返回正数(+1)aSort < bSort
,这对于“首先打开”和“最佳评级”都适用,但不适用于“按最小顺序”。所有需要改变的是,您需要为 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">★ 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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句