gpt4 book ai didi

javascript - 如何使用 list.js 通过选择下拉选项对列表项进行排序

转载 作者:行者123 更新时间:2023-11-29 21:14:21 25 4
gpt4 key购买 nike

我正在使用 list.js 对列表项进行排序,但我想在更改 select > 选项

时对项目进行排序

HTML

<div id="hotels">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">
Sort by name
</button>

<select class="sort" data-sort="">
<option value="" selected>Sort by</option>
<option value="hotelName">Hotel Name</option>
<option value="price">Price</option>
<option value="star">Star</option>
</select>

<ul class="list">
<li>
<h3 class="hotelName">The Umrao</h3>
<p class="price">5002</p>
<p class="star">3</p>
</li>
<li>
<h3 class="hotelName">Welcomhotel Dwarka, New Delhi</h3>
<p class="price">8367</p>
<p class="star">5</p>
</li>
<li>
<h3 class="hotelName">Lemon Tree Premier, Delhi Airport</h3>
<p class="price">3978</p>
<p class="star">4</p>
</li>
<li>
<h3 class="hotelName">Red Fox Hotel, Delhi Airport</h3>
<p class="price">9676</p>
<p class="star">2</p>
</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://listjs.com/no-cdn/list.js"></script>

我已经完成了一些代码,但是当我第一次选择它时它有错误但是如果我再次点击选择它来更改它用以前的值排序项目然后当下拉列表打开然后我选择然后它用当前值排序.

这是我的代码

var options = {
valueNames: [ 'hotelName', 'price', 'star' ]
};

var hotelList = new List('hotels', options);

$('.sort').change(function(){
var selection = $(this).val();
console.log(selection);
$(this).attr('data-sort', selection);
});

最佳答案

您应该为此使用 hotelList.sort 函数:

var options = {
valueNames: [ 'hotelName', 'price', 'star' ]
};

var hotelList = new List('hotels', options);

$('select.sort').change(function(){
var selection = $(this).val();
hotelList.sort(selection);
});

$('button.sort').click(function() {
hotelList.sort($(this).data('sort'));
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://listjs.com/no-cdn/list.js"></script>
<div id="hotels">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="hotelName">
Sort by name
</button>

<select class="sort">
<option value="" selected>Sort by</option>
<option value="hotelName">Hotel Name</option>
<option value="price">Price</option>
<option value="star">Star</option>
</select>

<ul class="list">
<li>
<h3 class="hotelName">The Umrao</h3>
<p class="price">5002</p>
<p class="star">3</p>
</li>
<li>
<h3 class="hotelName">Welcomhotel Dwarka, New Delhi</h3>
<p class="price">8367</p>
<p class="star">5</p>
</li>
<li>
<h3 class="hotelName">Lemon Tree Premier, Delhi Airport</h3>
<p class="price">3978</p>
<p class="star">4</p>
</li>
<li>
<h3 class="hotelName">Red Fox Hotel, Delhi Airport</h3>
<p class="price">9676</p>
<p class="star">2</p>
</li>
</ul>
</div>

关于javascript - 如何使用 list.js 通过选择下拉选项对列表项进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40094006/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com