使用计时器更改类中所有 <div> 的 CSS 样式答案

【问题标题】：Change CSS style for all <div> in a class with a timer使用计时器更改类中所有 <div> 的 CSS 样式
【发布时间】：2018-06-23 09:03:04
【问题描述】：

我有很多div

.led{
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 1;
    float: left;
    margin: 5px 5px;
    opacity: 0;
}
<div class="led" id="id1"></div>
<div class="led" id="id2"></div>
<div class="led" id="id3"></div>

我想将opacity 设置为除一个一个之外的所有值，每个之间有 1 秒的延迟。我试过这个功能，但它不起作用。

<script type="text/javascript">
    var leds = $(".led");
    for (var i=0; i<leds.length; i++) {
        setTimeout(function (){
        alert();
        $('#' + leds[i]).css('opacity' , '1');
        }, 1000);
    }
</script>

【问题讨论】：

什么不起作用？请看Minimal, Complete, Verifiable Example
迈克是正确的，您需要为您的问题提供更多详细信息。但是我确实注意到您的 ID 是 id1, id2, id3 并且您的 js 选择了 id0, id1, id2，因为您的 i 变量从 0 开始。尝试将 $('#' + leds[i]).css('opacity' , '1'); 更改为 $('#' + leds[i+1]).css('opacity' , '1');。

标签： javascript jquery css settimeout opacity

【解决方案1】：

这将一一设置每个元素的不透明度：

$(".led").each(function(index) {
    $(this).delay(1000*index).queue(function() { 
      $(this).css('opacity' , '1');
     })
});

【讨论】：

【解决方案2】：

工作代码：

var leds = $(".led");
for (var i = 0; i < leds.length; i++) {
  (function(idx) {
    setTimeout(function() {
      $('#' + leds[idx].id).css('opacity', '1');
    }, 1000 * idx);
  })(i)
}

.led {
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
  margin: 5px 5px;
  padding:15px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="led" id="id1">TEST 1</div>
<div class="led" id="id2">TEST 2</div>
<div class="led" id="id3">TEST 4</div>

您的代码有问题：

变量i 总是在setTimeout 内部引用3，因为它在函数外部绑定到同一个变量。我们可以使用 IIFE 并将 i 作为参数传递给该函数来解决此问题。
leds[i] 指的是一个 DOM 元素，它不代表该元素的 id。因此$('#' + leds[i]) 什么都不做。
另外，setTimeout 时间需要与idx 计数器相乘，这样它们就不会立即显示，而是在延迟 1000 毫秒后显示。

你也可以试试这个过渡效果：

var leds = $(".led");
for (var i = 0; i < leds.length; i++) {
  (function(idx) {
    setTimeout(function() {
      $('#' + leds[idx].id).css('opacity', '1');
    }, 1000 * idx);
  })(i)
}

.led {
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
  margin: 5px 5px;
  padding: 15px;
  opacity: 0;
  transition: opacity .9s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="led" id="id1">TEST 1</div>
<div class="led" id="id2">TEST 2</div>
<div class="led" id="id3">TEST 4</div>

【讨论】：