jQuery过滤器-按属性和价格排序
jQuery filter - sort by attribute and sort by price
我正在尝试创建过滤内容的下拉菜单。我有两种不同类型的过滤器:1)按价格排序的过滤器2)根据产品中标记的属性进行排序的过滤器。
我是第一次实现这种类型的请求。我有两个半工作，但似乎两个过滤器相互冲突。例如:如果我先按价格过滤，然后尝试按属性(下拉)过滤，它不会正确过滤。但如果我只按价格或下拉过滤，它会正确过滤。
同样，现在我有价格过滤按钮，但我希望价格是在一个单独的下拉，以及。我还想在这里添加"最畅销"作为一个属性，我只是根据最畅销来标记产品。这可能吗?
有人能帮忙吗?看一看?
感谢所有的帮助!
小提琴:https://jsfiddle.net/daysable/eags255n/
我的代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p>What speed do you need? </p>
<button id="asc"> sort by price asd</button><button id="desc"> sort by price desc</button>
<p>What speed bike do you need? </p>
<select class="filterby">
<option value="all"><h5>See All</h5></option>
<option value="15"><h5>15</h5></option>
<option value="20"><h5>20</h5></option>
<option value="25"><h5>25</h5></option>
<option value="50"><h5>50</h5></option>
<option value="150"><h5>150</h5></option>
<option value="160"><h5>160</h5></option>
</select>
<p>What do you like to watch? </p>
<select class="filterby">
<option value="all"><h5>See all packages</h5></option>
<option value="showtime"><h5>Showtime</h5></option>
<option value="hbo"><h5>HBO</h5></option>
<option value="cinemax"><h5>Cinemax</h5></option>
<option value="starz"><h5>Starz</h5></option>
<option value="ondemand"><h5>On Demand</h5></option>
</select>
<p>Do you want a contract? </p>
<select class="filterby">
<option value="all"><h5>See all deals?</h5></option>
<option value="contract"><h5>Contract</h5></option>
<option value="nocontract"><h5>No Contract</h5></option>
</select>
</ul>
<div class="FilterSorting">
<div id="FilterContainer">
<!-- CARD 1 -->
<li class="ux-offer all ondemand hbo 50 contract">
<div class="offer">
<p class="offer-lob">50 mph</p>
<div class="container">
<div class="offer-price">
<p class="title">Bike 1</p>
<p class="ux-priceoffer">
<span class="ux-priceoffer--currency">$</span>
<span class="ux-priceoffer--dollars">89</span>
<span class="ux-priceoffer--cents">99/mo</span>
<span class="ux-priceoffer--duration">for 12 mo.</span>
</p>
<a class="ux-button" href="#">Add to cart</a>
</div>
</div>
</li>
<!-- CARD 2 -->
<li class="ux-offer all showtime 15 nocontract">
<div class="offer">
<p class="offer-lob">15 mph</p>
<div class="container">
<div class="offer-price">
<p class="title">Bike 2</p>
<p class="ux-priceoffer">
<span class="ux-priceoffer--currency">$</span>
<span class="ux-priceoffer--dollars">44</span>
<span class="ux-priceoffer--cents">99/mo</span>
<span class="ux-priceoffer--duration">for 6 mo.</span>
</p>
<a class="ux-button" href="#">Add to cart</a>
</div>
</div>
</li>
<!-- CARD 3 -->
<li class="ux-offer all ondemand cinemax 20 contract">
<div class="offer">
<p class="offer-lob">20 mph</p>
<div class="container">
<div class="offer-price">
<p class="title">Bike 3</p>
<p class="ux-priceoffer">
<span class="ux-priceoffer--currency">$</span>
<span class="ux-priceoffer--dollars">109</span>
<span class="ux-priceoffer--cents">99/mo</span>
<span class="ux-priceoffer--duration">for 6 mo.</span>
</p>
<a class="ux-button" href="#">Add to cart</a>
</div>
</div>
</li>
<!-- CARD 4 -->
<li class="ux-offer all hbo 150 contract">
<div class="offer">
<p class="offer-lob">150 mph</p>
<div class="container">
<div class="offer-price">
<p class="title">Bike 4</p>
<p class="ux-priceoffer">
<span class="ux-priceoffer--currency">$</span>
<span class="ux-priceoffer--dollars">80</span>
<span class="ux-priceoffer--cents">99/mo</span>
<span class="ux-priceoffer--duration">for 12 mo.</span>
</p>
<a class="ux-button" href="#">Add to cart</a>
</div>
</div>
</li>
<!-- CARD 5 -->
<li class="ux-offer all showtime starz 25 nocontract">
<div class="offer">
<p class="offer-lob">25 mph</p>
<div class="container">
<div class="offer-price">
<p class="title">Bike 5</p>
<p class="ux-priceoffer">
<span class="ux-priceoffer--currency">$</span>
<span class="ux-priceoffer--dollars">220</span>
<span class="ux-priceoffer--cents">99/mo</span>
<span class="ux-priceoffer--duration">for 12 mo.</span>
</p>
<a class="ux-button" href="#">Add to cart</a>
</div>
</div>
</li>
<!-- CARD 6 -->
<li class="ux-offer all hbo starz ondemand 160 contract">
<div class="offer">
<p class="offer-lob">160 mph</p>
<div class="container">
<div class="offer-price">
<p class="title">Bike 6</p>
<p class="ux-priceoffer">
<span class="ux-priceoffer--currency">$</span>
<span class="ux-priceoffer--dollars">50</span>
<span class="ux-priceoffer--cents">99/mo</span>
<span class="ux-priceoffer--duration">for 3 mo.</span>
</p>
<a class="ux-button" href="#">Add to cart</a>
</div>
</div>
</li>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
}).join(".");
$("div#FilterContainer").find("li.ux-offer").hide();
$("div#FilterContainer").find("li." + filters).show();
});
</script>
<script>
function sortByPrice(a,b){
return $(a).find('.ux-priceoffer').text() > $(b).find('.ux-priceoffer').text();
}
function sortByPriceDesc(a,b){
return $(a).find('.ux-priceoffer').text() < $(b).find('.ux-priceoffer').text();
}
function reorderEl(el){
var container = $('.FilterSorting');
container.html('');
el.each(function(){
$(this).appendTo(container);
});
}
$('#asc').click(function(){
reorderEl($('.ux-offer').sort(sortByPrice));
});
$('#desc').click(function(){
reorderEl($('.ux-offer').sort(sortByPriceDesc));
});
</script>
</html>
好了，有几件事，从某处插入数据而不是硬编码到html中可能是明智的。您甚至可以创建一个文本文件并将其读入数组。这样你就可以得到一个总成本的数组，并根据它运行你的.sort，因为你正在做一些奇怪的事情与支付计划(i)。x美元，x个月)。你会(就像我暗示的那样)想要使用类似对所有元素排序的东西，这样它将返回一个完整的排序列表，并且你可以附加整个列表。
当然，这并不是唯一的方法，这对我来说似乎是最直观的，至少对于price来说是这样，因为你实际上想要按升序或降序对列表进行排序。
相关文章：
- 当属性不一致时，如何根据属性对JS对象列表进行排序
- row.entity.xxxx属性doensn'排序后不匹配
- 按子属性(可能缺少）对对象的 javascript 数组进行排序
- 按多个属性对多维数组进行排序
- jQuery TinySort按数据属性排序和放置
- AngularJS使用对象属性排序多个对象数组
- 按属性对数组排序
- 如何使用第二个数组中对象的相关属性对对象数组进行排序
- 按属性对对象数组进行排序
- jQueryUI可拖动+可排序错误(无法读取未定义的属性'选项'）
- Javascript:使用value属性对关联数组进行排序，而不转换为对象数组
- 为未排序列表设置onclick(）属性
- 根据三个模型属性对主干集合进行排序
- 无法读取属性“”;匹配“;(嵌套排序）
- 排序属性由于某种原因不起作用
- 设置排序属性时无法清除数组控制器
- MongoDB多个排序属性:如何确定优先级
- 获取HTML而不重新排序属性
- 用不同的模型排序'属性烬
- 如果Dgrid的id以数字开头，则Dgrid列调整大小，隐藏，重新排序属性会产生错误
