【问题标题】:Isotope: Select and display .xx class at the top同位素:选择并在顶部显示 .xx 类
【发布时间】:2012-03-14 10:38:16
【问题描述】:

我正在使用 Isotope (http://isotope.metafizzy.co/docs/sorting.html) 中的排序方法,并且需要在链接时在顶部显示分配给它们的特定 CSS 类名称的元素点击。剩余元素必须在排序后的元素下方保持可见,因此我无法使用同位素过滤。

我对 JS/jQuery 不太满意,所以我什至不确定这段代码是否正确设置,但目前我的元素正在按日期排序,这很好,但它对所有元素都这样做。我希望我的代码找到所有类名为“博客”的元素,然后按日期排列。到目前为止,这是我的代码:

    getSortData : {
      blogs : function( $elem ) {
        return $elem.attr('.blogs'), $elem.find('.date').text();
      }
    }

【问题讨论】:

    标签: javascript jquery sorting jquery-isotope


    【解决方案1】:

    同位素根据您提供的函数的返回值进行正常排序。

    所以你需要返回一些将.blog 元素放在顶部的东西..

    我假设只有你使用了$elem.find('.date').text()

    因此,要更改此设置,您只需在 .blog 元素的开头添加一个空格

    试试

    getSortData : {
      blogs : function( $elem ) {
        var isBlog = $elem.hasClass('blogs');
        return (isBlog?' ':'') + $elem.find('.date').text();
      }
    }
    

    cmets 更新

        sortBy: 'initial',
        sortAscending : false,
        itemSelector: '.module',
        getSortData: {
            initial: function($elem) {
                return $elem.find('.date').text();
            },
            blogs: function($elem) {
                var isBlog = $elem.hasClass('blogs');
                return (isBlog ? '9' : '') + $elem.find('.date').text();
            },
    

    【讨论】:

    • 哇,效果很好……谢谢!但现在唯一的问题是最旧日期的框首先显示。为了解决这个问题,我可以在我的 isotope 函数中输入 sortAscending : false ,但这意味着旧内容会显示在页面加载的顶部。这是一个单独的问题,但您知道在上面给我的代码中使用 sortAscending : false 选项的方法吗?
    • @egr103,不确定我是否理解问题.. 它应该像以前一样排序,但是将所有 .blog 元素移动到顶部(在它们之间排序,其余部分是我>)。您确实希望每个组(.blog 和其他组被排序在他们自己的组中,对吗?)您有这个的实时版本吗?或者你能做一个jsfiddle吗?
    • 一切过滤到顶部都很好,因此您的代码没有任何问题。谢谢!问题在于按最近日期订购盒子。这是小提琴:jsfiddle.net/93fL2 请注意,当您单击“博客”链接时,顶部有两个框(青色边框)。最近的日期框(标题为“博客/导演”的框)应该在左上角,因为它的日期是最近的 (20120314)。不是,因为 Isotope 默认按升序对框进行排序。我需要这些框按降序排序,以便首先显示最近的日期框。我希望这是有道理的!?
    • 正如我上面提到的,我已经尝试过 Isotope 选项: sortAscending : false 可以解决问题,但它会产生另一个问题,即当刷新页面时,最旧的日期框会显示在顶部,并且最新的在底部,这对访问者没有多大用处。
    • @egr103,我明白了。你应该像你说的那样将sortAscending 设置为false,但不要在日期的开头使用空格,而是使用大于所有的数字。例如,将空格更改为9或日期中使用的数字之后的任何 ascii 字符)将修复它。 WORKING EXAMPLE
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-07-15
    • 2012-10-18
    • 2013-06-14
    • 1970-01-01
    • 1970-01-01
    • 2021-08-09
    • 1970-01-01
    相关资源
    最近更新 更多