首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用混合方式过滤页面加载中的“溢价”选项

使用混合方式过滤页面加载中的“溢价”选项
EN

Stack Overflow用户
提问于 2016-05-04 16:28:57
回答 2查看 126关注 0票数 0

我有一个网格设置,显示了众多的清单。在这些列表中有“溢价”类别。如:食品清单1、住宿清单1、食品清单2、优质食品清单。

基本上,目前它们是按照HTML中设置的顺序加载的。但我想先列出‘溢价’清单时,选择“所有”,然后第一次当类别“食品”被选中。

有人能帮我吗?小提琴在这里- https://jsfiddle.net/r1yd01fq/2/

代码语言:javascript
运行
复制
$('#Container').mixItUp();
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-05-05 10:20:39

找到了一种相对简单的方法。最后使用了.insertAfter,一个位于容器顶部的高级div保持架。然后,我使用了一个洗牌插件来随机选择额外的列表,这样首先加载的就不会总是显示出来。

https://jsfiddle.net/r1yd01fq/4/

代码语言:javascript
运行
复制
$.fn.shuffle = function() {

    var allElems = this.get(),
        getRandom = function(max) {
            return Math.floor(Math.random() * max);
        },
        shuffled = $.map(allElems, function(){
            var random = getRandom(allElems.length),
                randEl = $(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
       });

    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });

    return $(shuffled);

};

// Insert all premium listings first
$(".premium").insertAfter(".prem");

// Shuffle premium listing so they appear randomly
$('.premium').shuffle();

// Instantiate MixItUp:
$('#Container').mixItUp({});
票数 0
EN

Stack Overflow用户

发布于 2016-05-04 17:36:44

这应该适用于“所有”选项。

代码语言:javascript
运行
复制
$(document).on("click", ".filter", function() {
  var choice = $(this).data("filter");
  switch (choice) {
    case "all":
      $("#Container div").attr("data-sort", 0);
      $("#Container div.premium").attr("data-sort", 1);
      break;
  }
  var d = $("#Container div");
  d.sort(function(a, b){
    return $(b).data("sort")-$(a).data("sort")
  });
  $("#Container").html(d);
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37033279

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档