結果のリストを価格と評価で並べ替えようとしています。簡単にするために、Rider's Lodge と Olina Lodge の 2 つの結果だけを含めました。一方向に並べ替える関数を作成しました。
同じ関数を再利用して、[価格で並べ替え] をクリックすると昇順で並べ替え、もう一度クリックすると降順で並べ替え、2 つを切り替えるにはどうすればよいですか?
<div class="tab-content">
<div id="filters">
<p>
<a href="javascript:sort_by_rating();">Sort by Rating</a>
<br>
<a href="javascript:sort_by_price();">Sort by Price</a>
</p>
</div>
<div id="div_hotel_results" class="tab-pane active">
<form id="hotel-form">
...
</form>
<div class="results-row">
<h5>Riders Lodge</h5>
<span class="label label-info price">$103.64</span>
<span class="rating" data-rating="3.0">3.0</span>
</div>
<div class="results-row">
<h5>Olina Lodge</h5>
<span class="label label-info price">$99.64</span>
<span class="rating" data-rating="2.5">2.5</span>
</div>
</div>
</div>
<script type="text/javascript">
function sort_by_price () {
var sorted_list = [];
$('.price').each(function (index) {
sorted_list[index] = $(this).parent().parent().remove();
sorted_list[index]['cleaned_price'] = parseFloat($(this).text().replace(/[^0-9\.]+/g,""));
});
sorted_list.sort(function (a, b) {
if (a['cleaned_price'] == b['cleaned_price']) {
return 0;
} else if (a['cleaned_price'] > b['cleaned_price']) {
return 1;
} else {
return -1;
}
});
$('#hotel-form').after(sorted_list);
}
</script>