1

我有一个 while 循环，它在 20 秒内从 175 计数到 255，即 175、215、235、255。这些结果存储在变量中，该变量使用 jQueryred连接到一个属性中。background-color

    $(function(){
    var red=175;
    while  (red <= 235){
       red+=20; 
       console.log(red); 
    }

    $('.change').next().css({"backgroundColor":"rgb("+red+",255,50)"})

    });

当我 console.logred它记录上面提到的所有四个数字。当红色连接到backgroundColor值时，它仅使用返回的最终数字。我的问题是，有没有办法可以将四个单独的结果委托给同一个类backgroundColor的四个连续的值？<divs>

http://codepen.io/seraphzz/pen/HtpIC

4

3 回答 3

3

您可能想尝试这样的事情：

$(function () {
    var red = 175; //set the initial value for your variable
    $('.change').css('background-color', function () { //use the call back function of css to return the value
      return "rgb(" + (red += 20) + ",255,50)";  //return the rgb along with incrementing for the next element
    });

});

http://jsfiddle.net/nejZT/

在您当前的代码中，您所做的是增加变量的值直到您的条件，所以最后您将变量的值设为 235，然后您将其应用于除第一个有你的陈述

$('.change').next().css({"backgroundColor":"rgb("+red+",255,50)"})

查看带有函数参数的 .css 的文档。

如果您想在达到限制后重复循环，不确定您是否对检查 <=235 有意义，您也可以尝试此操作。

$(function () {
    var red = 155;
    $('.change').css('background-color', function () {
        return "rgb(" + (red = ((red < 235) ? red + 20 : 175)) + ",255,50)";
    });
});
于 2013-06-07T03:10:31.193 回答
1

这个怎么样？循环遍历匹配的 div 并增加它们的红色。如果由于某种原因，您有超过 4 个匹配元素，这也不会中断。它只会将 255 的红色值应用于元素 4+

var red = 175; // First matching element has a red val of 175
$('.change').each(function() {
    $(this).css('background-color', 'rgb(' + red + ',255,50)');
    if (red <= 235) red += 20; // Only increment red if it's <= 235
});

小提琴显示 6 个 div（不中断）：http: //jsfiddle.net/xwT5r/

于 2013-06-07T03:12:47.703 回答
1

你的意思是这样的吗？

$(function(){
    var red=175;
    var currElem = $(".change").first();
    while  (red <= 235){
       red+=20; 
       console.log(red); 
       currElem.css({"backgroundColor":"rgb("+red+",255,50)"});
       currElem = currElem.next(".change");
    }

});

http://jsfiddle.net/QufM4/

于 2013-06-07T03:13:19.360 回答