1

20 秒で 175 から 255、つまり 175、215、235、255 をカウントする while ループがあります。これらの結果は変数に格納され、jQuery を使用してプロパティredに連結されます。background-color

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

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

    });

console.logredを実行すると、上記の 4 つの数値がすべて記録されます。赤が値に連結されると、backgroundColor返された最終的な数値のみが使用されます。私の質問は、4 つの個別の結果を同じクラスbackgroundColorの 4 つの連続した値に委任できる方法はありますか?<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

このようなことを意味しますか？

$(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 に答える
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 を示す Fiddle (壊れていない): http://jsfiddle.net/xwT5r/

于 2013-06-07T03:12:47.703 に答える