一個接一個地改變多個div的顏色

Question

我在逐一更改某些div的顏色時遇到問題。 在頁面加載時，我創建了一個div，其中填充了15x15 div的正方形（class ='feld'）

我要更改的所有div都有feld類

到目前為止，我的代碼：

$(document).ready(function() {
create();
var delay = 1;
function create(){
    for (z = 1; z < 16; z++) {
            var zeile = jQuery('<div/>', {
                class: 'zeile',
                id: z,
                html: ""
            });
            $("#wortfeld").append(zeile);
            for (s = 1; s < 16; s++) {
            var div = jQuery('<div/>', {
                class: 'feld',
                id: s,
                html: ""
            });
            $(".zeile[id=" + z + "]").append(div);  
            };
        };
    };
$('.feld').each(function(){ 
        $(this).delay((delay++)*500).css("background-color","lightgoldenrodyellow");
    });
});

因此，我的目的是逐個更改.feld的顏色。 但這不符合我的解決方法。 我也嘗試這樣做：

    create(function(){
        $('.feld').each(function(){ 
            $(this).delay((delay++)*500).css("background-color","lightgoldenrodyellow");
    });
});

也不起作用

這是HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
 <head>
<link href="design_crossword.css" type="text/css" rel="stylesheet">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="crossword.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="wortfeld">TEST</div>
</div>
</body>
</html>

Answer 1

.delay(duration).css({})

在持續時間之后，這並不適用於CSS，而是立即生效。

您需要使用.queue ，例如以下示例：

$('.feld').each(function(){ 
    $(this).delay((delay++)*500).queue(function(next){
        $(this).css("background-color","lightgoldenrodyellow");
        next();
    });
});

Answer 2

首先，一個不相關的問題，但一個可能導致問題：你不應該使用的ID超過一次，給你zeile和feld項的唯一的ID。 您還可以使用setTimeout獲得一些好處，而無需涉及.delay：

$(document).ready(function() {
create();
var delay = 1;
function create(){
    for (z = 1; z < 16; z++) {
        var zeile = jQuery('<div/>', {
            class: 'zeile',
            id: 'z'+z,
            html: ""
        });
        $("#wortfeld").append(zeile);
        for (s = 1; s < 16; s++) {
        var div = jQuery('<div/>', {
            class: 'feld',
            id: 'z'+z+'s'+s,
            html: ""
        });
        $("#z" + z).append(div);  
        };
    };
};
    $('.feld').each(function(){
        setTimeout(function(x){
        $(x).css("background-color","lightgoldenrodyellow");
    },(delay++)*500,this);
    });
});

小提琴

一個接一個地改變多個div的顏色

問題描述

2 個解決方案

解決方案1
0 2014-08-17 16:41:39

解決方案2
0 已采納 2014-08-17 16:45:08

一個接一個地改變多個div的顏色

問題描述

2 個解決方案

解決方案1 0 2014-08-17 16:41:39

解決方案2 0 已采納 2014-08-17 16:45:08

解決方案1
0 2014-08-17 16:41:39

解決方案2
0 已采納 2014-08-17 16:45:08