Javascript 菜单样式 — 循环中的循环

Javascript menu styling — loop within a loop

本文关键字：循环 菜单 样式 Javascript      更新时间：2023-09-26

这里的代码笔：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);
});

代码笔

相关文章：