jquery - 容器中的每个 div 都比前一个 div 更不透明

Question

我想创建一行 div，每个 div 的背景色都比前一个不透明。创建一种渐变。

为了为每个 div 生成不同的不透明度，我创建了一个使用所述 div 的 ID 的变量。但这并没有产生任何有用的结果。遗憾的是，在不了解所有基础知识的情况下承担太多。

$(document).ready(function(){

    $("div").each(function(index, value) { 

        var ids = $(this).attr('id');
        var opa = ids/10

        $("div").css("background-color", "rgba(255, 255, 255, "+opa+")");

    });

});

感谢您的帮助!

Answer 1

你快到了! $("div") 分配背景颜色时应该是 $(this) 因为你不想在所有元素上设置它，而只在当前元素上设置一个。

$(function(){

    $("div").each(function(index, value) { 
        var ids = $(this).attr('id');
        var opa = ids/10;
      
        $(this).css("background-color", "rgba(255,255,255, "+opa+")");
    });

});

body {
  background-color: #000;
}

.box {
  display: inline-block;
  width: 50px;
  height: 100px;
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<div class="box" id="1"></div>
<div class="box" id="2"></div>
<div class="box" id="3"></div>
<div class="box" id="4"></div>