Question

我正在使用这个插件：http://tinysort.sjeiti.com/#customsortfunction

我有一个包含3个选项的选择框。当我选择其中一个我要列出的选项以按所选内容排序时... 例如：

<select id="sort-news">
  <option value="cars">cars</option>
  <option value="house">house</option>
  <option value="birds">birds</option>
</select>

新闻项目如下所示：

<article data-category="house" class="news-item">
  <div class="thumb">
    <img alt="" title="" src="images/news-image.jpg">
    <div class="overlay"></div>
  </div>
  <div class="news-txt">
    <h3>Ny webportal</h3>
    <p>14:00 Først mountainbiker ved Moesgård Museum</p>
  </div>
</article>

让我们假设有很多新闻项目，具有不同的数据类别例如，我有10个新闻项，其中data-category=""是我选择的3个选项之一。当我在选择中选择某些内容时，我希望对列表进行排序，只选择

如果我在选择中单击house，我只想显示包含data-category="house"

的新闻项目

这个插件可以吗？

Answer 1

虽然帖子的标题是指排序，但帖子的详细信息以要求结束＆＃34;如果我在选择中点击房子，我只想显示新闻项目data-category="house"＆＃34;

这听起来像是过滤，而不是排序;要这样做，因为我们知道您正在使用jQuery，所以您可以将.change（）事件处理程序附加到＆lt; select＆gt;框和隐藏/显示基于所选值的新闻项目。例如：

$('#sort-news').change(function() {
   var NewsType = $(this).val();
   $('.news-item[data-category!="' + NewsType + '"]').hide();
   $('.news-item[data-category="' + NewsType + '"]').show();
});

jsFiddle：http://jsfiddle.net/G7mLj/

如果除了基于所选类别隐藏/显示新闻项目之外，您还希望按其他属性对其余项目进行排序，TinySort非常适合这一点。使用这些详细信息更新您的问题（可能还有一些额外的标记 - 如果按数据类别进行过滤，则不清楚您要排序的内容）。

如何使用tinysortjs对项目进行排序

1 个答案: