Question

在this website中，当您向下滚动到徽章部分时，我会有“锁定和解锁”徽章。

的问题：

我可以让锁定的徽章褪色。（如在悬停效果中我们看到褪色的图像）
我们可以先解锁未锁定的徽章，并在最后锁定徽章。

与锁定和解锁部分相关的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.我可以让锁定的徽章褪色。（如悬停效果，我们看到褪色的图像）

最佳做法是将当前状态类添加到元素的容器中。在你的情况下，它可能是这样的：

＆＃13;

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

＆＃13;

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

＆＃13;

总是更好地为CSS中设计的所有元素提供类。它将在未来为您节省很多时间并防止出现一些问题。

2.我们可以让解锁的徽章首先显示，并在最后锁定徽章。

请查看此主题Sort JavaScript object by key。另一种方法是使用lodash orderBy method。

根据条件淡化图像并进行排列

1 个答案: