一个接一个地改变多个div的颜色 [英] changing color of multiple divs one after another
问题描述
我在逐个更改某些div的颜色时遇到问题. 在页面加载时，我创建了一个div，其中填充了一个15x15 div(class ='feld')的正方形
i have a problem changing the color of some divs one by one. on page load i create a div which is filled with a square of 15x15 divs (class='feld')
我要更改的所有div都有feld类
All the divs i want to change have the class feld
到目前为止，我的代码:
My code so far:
$(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的颜色.但这并不能解决我的问题. 我也尝试过这种方式:
So my intention was to change the color of each .feld one by one. But it doesn't work the way i approached this. I also tried to do it this way:
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>
推荐答案
首先，这是一个不相关的问题，但可能会引起问题:
您不应该多次使用ID，并为您的zeile和feld项目提供唯一的ID.
您还可以使用setTimeout获得一些好处，而无需涉及.delay:
Firstly, an unrelated issue but one that could cause problems:
You shouldn't use an ID more than once, give your zeile and feld items unique ID's.
You could also get some mileage with setTimeout, no need to involve .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的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
