Question

我尝试创建过滤内容的下拉菜单。我有两种不同类型的过滤器： 1）按价格排序的过滤器 2）按产品中标记的属性进行排序的过滤器。

我很擅长实施此类请求。我有两个半工作，但似乎两个过滤器相互冲突。例如：如果我先按价格过滤，然后尝试按属性过滤（下拉列表），则不会正确过滤。但是，如果我只是按价格或仅通过下拉列表过滤，它就会正确过滤。

此外，现在我将价格过滤作为按钮，但我希望价格也在单独的下拉列表中。我还想添加畅销书＆＃34;作为一个属性，我只是在最畅销的产品标签。这可能吗？

有人可以帮忙吗？看一下？

感谢您的帮助！

小提琴：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>

Answer 1

好的，所以有一些事情，从某个地方插入这些数据而不是将其硬编码到html中可能是明智之举。您甚至可以创建一个文本文件并将其读入数组。通过这种方式，您可以获得一系列总费用，然后运行.sort，因为您在付款计划方面做了一些奇怪的事情（即x个月的x美元）。你会（就像我暗示的那样）想要对所有元素进行排序，这样就会返回整个排序列表，并且你可以附加整个列表。

当然，这不是唯一的方法，它对我来说似乎是最直观的，至少对价格而言，因为你实际上想要按升序或降序对列表进行排序。

jQuery过滤器 - 按属性排序并按价格排序

1 个答案: