0

我对 javascript非常陌生，我只是无法理解循环和变量列表。似乎每个教程都解释了一半，然后在剩下的路上漫无目的/胡言乱语，并没有真正说清楚。

所以，我决定div每次点击时都制作一种不同的颜色，它会遍历四种颜色。

HTML：

<div class="myDiv"></div>

CSS：

.myDiv {
    display: block;
    height: 100px;
    width: 150px;
    background: #ea5243;
}

JavaScript（使用 jQuery）：

$(document).ready(function() {
     var colors = ["#b8d30b", "#0099cc", "#e63f35", "#fbd108"];
     for(var i in colors) {
         $(".myDiv").on("click", function() {
             $(this).css("background", colors);
         });
     }
});

显然这是行不通的，但正如你所见，我想通过每次点击旋转每个颜色代码。

我试过用谷歌搜索我的问题，但发现很难分阶段，因此无济于事。正如我所说，我对 javascript 很陌生。

4

2 回答 2

4

您可以不断移动和推送颜色数组中的值。这比 for 循环要高级一些，但学习它也很好。您甚至不必担心颜色的长度。

var colors = ["#b8d30b", "#0099cc", "#e63f35", "#fbd108"];
$(".myDiv").on('click', function () {
    //removes the zeroth element from the array
    var color = colors.shift();

    $(this).css('background-color', color);

    //puts the "pushed" element at the end of the array
    colors.push(color);
});

http://jsfiddle.net/ExplosionPIlls/F79jd/

于 2013-02-24T02:18:30.953 回答
3

http://jsfiddle.net/ttgTj/4

var colors = ["#b8d30b", "#0099cc", "#e63f35", "#fbd108"];
var i = 0;
$(".myDiv").on("click", function () {
    $(this).css("background", colors[i]);
    i = (++i >= colors.length)? 0: i;
});
于 2013-02-24T02:18:19.140 回答