0

<li>我使用 MixItUp ( https://mixitup.kunkalalabs.com/docs )对一些进行排序,但是当订单更改时 CSS 无法应用正确的 nth-of-type (按下按钮 2)。它仍然使用li.isActive:nth-of-type(3n+2)而不是li.isActive:nth-of-type(3n+1) 我尝试添加.isActive过滤元素,但它无效。有没有办法用 or 对可见元素进行排序或 nth-child刷新 nth-of-type?谢谢。

HTML

<ul id="mosaic">
    <li class="col-md-4 mix freelance" data-myorder="1">
        <div class="project">
            1
            <p class="card-text">
                xyz
            </p>
        </div>                        
    </li>

SCSS

#mosaic li.isActive:nth-of-type(1) .project {
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -ms-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}... 

Javascript

$('#mosaic').mixItUp({
    callbacks: {
        onMixEnd: function(state){
            console.log(state.$show);
            state.$targets.removeClass('isActive');
            state.$show.addClass('isActive');
        }
    }
});

关于 Jsfiddle 的完整示例:https ://jsfiddle.net/0d8LgsxL/

4

0 回答 0