代码笔在这里:http://codepen.io/saltcod/pen/ufiHr
我正在尝试设置菜单的样式。我希望每个元素都有不同的背景不透明度——那部分是有效的。
我无法弄清楚的部分是如何在第 5 项之后重置不透明度。当循环到达元素 #6 时,我希望不透明度回到它在 #1 中的状态。
如果没有任何意义,这里是一个屏幕:http://cl.ly/image/0x3e350H0l0o
我基本上想更改不透明度五次,然后再次从顶部开始。
JS:
var menuItems = $('li a');
menuItems.each(function(index, value){
var index = index + 1;
startOpacity = .2 + index/10;
counter = .05;
$(this).css({'background-color': 'rgba(255,255,255,'+startOpacity+')'});
$(this).append(" " + index);
});
最佳答案
您可以借助取模运算符进行回收。
menuItems.each(function (index, value) {
var index = index + 1,
startOpacity,
counter, $this = $(this);
startOpacity = .2 + (index % 5) / 10; //Here, you can give probably half the number of your menu items instead of 5
counter = .05;
$this.css({
'background-color': 'rgba(255,255,255,' + startOpacity + ')'
}).append(" " + index);
});
关于Javascript 菜单样式——循环内循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19324437/