如何按顺序使用jQuery事件

How to use jQuery event in sequence

本文关键字：jQuery 事件 何按 顺序      更新时间：2024-03-14

我正在尝试学习jQuery，并制作了以下jsFiddle:

http://jsfiddle.net/jkNK3/

其想法是在单击时更改div的颜色。很好，我明白了，但我想知道是否有一种方法可以通过多个类的更改来更改div的颜色，也许可以使用某种数组或循环。让我解释一下。

我已经创建了几个类似的CSS类：

.color1 {..}
.color2 {..}
.color3 {..}
.color4 {..}
.color5 {..}
.color6 {..}

我想知道我们是否可以做一些类似的事情

addClass("color" + i)

在那里我可以循环通过1-6。

有什么办法可以做到这一点吗？谢谢你的帮助。

这是一个考虑全局javascript名称空间危险的好地方。下面是一个简单的例子，它利用闭包来避免jquery中的闭包：

$(function() {
    var numb  = 1;
    // this bit of managing the color state swap is another topic for discussion, so keeping it simple
    var colors_len = 6; 
    $("div").click(function() { 
        // this closure has access to the numb variable
        if (numb < colors_len) {
            numb++;
            $(this).addClass("color" + numb);
            $(this).removeClass("color" + (numb-1));
        } else {
            numb = 1;
            $(this).removeClass("color" + colors_len);
            $(this).addClass("color" + numb);
        }
    });
});

http://jsfiddle.net/2taH5/

ps。Jquery ui也有一个交换类方法，但更多的是用于动画

在我看来，最简单的方法是将颜色编号存储在jQuery方便的data()中，然后从中递增：

function fnClick() {
    var numb = $(this).data('color') || 2;
    $(this).addClass("color" + numb).data('color', ++numb)
}

FIDDLE

使其在最后一种颜色后返回到第一种颜色等

function fnClick() {
    var numb = $(this).data('color') || 2;
    numb = numb == 7 ? 1 : numb;
    $(this).removeClass().addClass("color" + numb).data('color', ++numb)
}

FIDDLE

使用一个随机数给div赋予一个随机颜色怎么样？

var classCount = 6;
$(document).ready(function () {
    $("div").on("click", fnClick);
});

function fnClick(e) {
   // Get the currently clicked element
   var $this = $(e.target),
       className = 'color' + Math.floor((Math.random() * classCount )+1);
   // Remove the exixting class/s
   $this.removeClass();
   // Add the class
   $this.addClass(className);
}

检查Fiddle

相关文章：