jQuery filter - сортировать по атрибуту и сортировать по цене

Я пытаюсь создать раскрывающееся меню, которое фильтрует контент. У меня есть два разных типа фильтров: 1) фильтр, который сортируется по цене 2) фильтр, который сортируется по атрибуту, помеченному в продукте.jQuery filter - сортировать по атрибуту и сортировать по цене

Я новичок в реализации этого типа запроса. У меня две полуработающие, но кажется, что два фильтра противоречат друг другу. Например: если я сначала фильтрую по цене, а затем попытаюсь фильтровать по атрибуту (dropdown), он не фильтрует правильно. Но он правильно фильтрует, если я просто фильтрую по цене или просто по выпадающему списку.

Кроме того, прямо сейчас у меня есть фильтрация цены как кнопки, но я хотел бы, чтобы цена была в отдельном выпадающем меню. Я также хотел бы добавить «лучший продавец» в качестве атрибута, и я просто помечаю продукты с точки зрения бестселлера. Возможно ли это?

Может кто-нибудь помочь? Взглянуть?

Спасибо за любую помощь!

скрипку: 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>

источник

2015-07-16 Phillyday

Может быть полезно, если вы создадите jsFiddle своего кода, а затем вернетесь к нему в этом вопросе https://jsfiddle.net/ – tenderloin

Ahh спасибо за отзыв! Я добавил скрипку к исходному сообщению. – Phillyday

Ваш вид по ценам не работает в любом случае, это может быть место для начала –

Итак, пара вещей, было бы целесообразно, чтобы вставить эти данные где-то вместо жесткого кодирования его в HTML , Вы можете сделать текстовый файл и даже прочитать его в массиве. Таким образом, вы можете получить массив общей стоимости и запустить свой .sort против этого, так как вы делаете некоторые странные вещи с планами выплат (т. Е. $ X за х месяцев). Вы, как я намекнули, захотите использовать что-то вроде сортировки по всем элементам, таким образом он вернет весь отсортированный список, и вы можете добавить весь список.

И, конечно, это не единственный способ сделать это, это кажется мне наиболее интуитивным, по крайней мере, ценой, поскольку вы действительно хотите отсортировать список в порядке возрастания или убывания.

источник

2015-07-17 13:36:19

Благодарим вас за отзыв! Это немного над моей головой. Можете ли вы помочь и/или привести пример этого? Я никогда не делал что-то в этом направлении, и отправная точка помогла бы. Спасибо! – Phillyday

Да, конечно, [чат] (https: // чат.stackoverflow.com/rooms/83559/thehumanchatroom) может быть проще –

Ahh выглядит как я не могу общаться. Мне нужно 20 очков репутации. – Phillyday

jQuery filter - сортировать по атрибуту и ​​сортировать по цене

ответ

Смежные вопросы

jQuery filter - сортировать по атрибуту и сортировать по цене