如何使用list.js通过选择下拉选项来排序列表项

How to sort list item by selecting dropdown option using list.js

本文关键字：选项 排序 列表 选择 list 何使用 js      更新时间：2023-09-26

我正在使用list.js对列表项进行排序，但我想对更改select > option的项目进行排序

<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>

我已经做了一些代码，但它有bug，当我选择第一次它的工作，但如果我去改变再次点击选择它排序项目与前一个值，当下拉打开后，我选择然后它排序与当前值。

这是我的代码

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>

相关文章：