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>

Answer 2

主要的是，使用$('div').css('background-color'...，您可以通过再次循环来设置所有<div>的背景颜色。尝试将其更改为：

$(this).css('background-color', 'rgba(255, 255, 255, ' + opa + ')' );

这样，$.each函数将获取ID并将计算值分配给循环中的当前<div>。我认为这听起来像你正在寻找的。

另外，从技术上讲，ID值必须以字母（大写或小写）开头。 data属性可能是放置所需值的更好位置。例如：

<div data-opacity="1">

可以使用jQuery访问：

$([element selector]).attr('data-opacity')

OR

$([element selector]).data('opacity')

示例：http://codepen.io/a_double/pen/NPRrYG

Answer 3

Perhpas另一种方法是不使用索引或值，而是使用div元素本身，因为通过使用id，您可以将自己限制为使用id放置的div的物理数量。这就是我所说的：

$(document).ready(function(){
    $('div').css('background-color', 'black');

    var numDiv = 0;
    var totalDiv = 0;
    $("div").each(function(){
        totalDiv ++;
    });
    $("div").each(function() { 
        var opa = numDiv/totalDiv;
        var colorrgba = 'rgba(0, 0, 0, ' + opa + ')';
        $(this).css("opacity", opa);
        numDiv++;
    });
});

使用上面的代码，我们看到你可以添加尽可能多的div，它将根据div的总数采用特定的div顺序来定义每个div的不透明度（所以你会有一致的渐变）。

请参阅fiddle

Answer 4

首先，您将css应用于所有div而不是循环指向的当前div。然后，您希望将100％不透明度值（1）除以屏幕上的div总数。然后，每次迭代都将划分的金额添加到运行总计中，并将其作为不透明度值应用。

$(document).ready(function(){

    var length =  1 /  $("div").length,
        opaTot = length,
        opa = length; //Complete opacity is 1

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

        var ids = $(this).attr('id');
        $(this).css("background-color", "rgba(255, 255, 255, "+opaTot +")");
        opaTot += opa;

    });

});

这是测试我的例子的小提琴。 http://jsfiddle.net/v5bd5byf/1/

Answer 5

实际上，使用纯Javascript http://jsfiddle.net/4p6vtz46/：

可以轻松实现这一点

var opa=0.3;
var divs = document.getElementsByClassName('opacity');

for (i=0; i<divs.length; i++) {



    (function () {

        divs[i].style.opacity = opa;
        opa+=0.3;
    })();

}

容器中的每个div比之前的div更不透明

5 个答案: