根據條件淡化圖像並排列圖像

Question

在this website中，當您向下滾動到徽章部分時，我有「鎖定和解鎖」徽章。

問題：

1. 我可以鎖定徽章褪色。 （如懸停效果，我們看到一個褪色的圖像）

2. 我們可以使解鎖的徽章首先出現，並鎖定徽章結束。

CSS和相關的鎖定和解鎖區間JS：整個網站的

$.each($('.Portfolio-box'), function() { 
 
    var count = $(this).children('.has-badge').attr('data-count'); 
 
    if (count > 0) { 
 
    $(this).children('ul.locked').hide(); 
 
    $(this).children('ul.unlocked').show(); 
 
    } else { 
 
    $(this).children('ul.locked').show(); 
 
    $(this).children('ul.unlocked').hide(); 
 
    } 
 
});

.unlocked li:before { 
 
    content: '\2713'; 
 
    display: inline-block; 
 
    color: green; 
 
    margin-left: -65px; 
 
    padding: 0 9px 0 0; 
 
} 
 
.unlocked li { 
 
    list-style-type: none; 
 
    font-size: 1.5em; 
 
    margin: 1px; 
 
    font-weight: bold; 
 
} 
 
.locked li:before { 
 
    content: '\274c'; 
 
    display: inline-block; 
 
    color: red; 
 
    margin-left: -65px; 
 
    padding: 0 9px 0 0; 
 
} 
 
.locked li { 
 
    list-style-type: none; 
 
    font-size: 1.5em; 
 
    margin: 1px; 
 
    font-weight: bold; 
 
}

小提琴鏈接：https://jsfiddle.net/dkjz1z4k/1/

Answer 1

1.可我做鎖定的徽章消失。 （如懸停效果，我們看到一個褪色的圖像）

最佳做法是將當前狀態類添加到元素的容器。你的情況可能是這樣的：

.locked-badge img { 
 
    opacity: 0.7; 
 
} 
 

 
.locked-badge .badge-img { 
 
    opacity: 0.7;  
 
}

<div class="Portfolio-box locked-badge"> 
 
    <img src="#" class="badge-img"> 
 
</div>

它總是最好給類的所有元素女巫CSS設計。它將爲您節省很多時間，並避免一些問題。

2.我們可以先解鎖徽章，最後鎖定徽章。

請檢查這個主題Sort JavaScript object by key。另一種選擇是使用lodash orderBy method。