我想创建一排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+")");
});
});
谢谢您的帮助!
最佳答案
你快到了!分配背景色时,$("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>