Question

如何在移动设备的第一次和第二次点击中创建具有不同课程事件的按钮？

这是按钮的html。

<a href="#" class="icon-white">click</a>

按钮默认类是＆＃34; icon-white＆＃34;。

首次点击它时，转到课程＆＃34; icon-red＆＃34;。
再次点击它，转到课程＆＃34; icon-blue＆＃34;。
第三次点击 - 返回＆＃34; icon-white＆＃34;。

并重复.....

我在http://jsfiddle.net/7YATm/找到了类似的示例，但此示例不会返回默认值，也不会处理类名。

任何人都可以帮助我吗？

Answer 1

试试这个

    var action = 1;

$("input").on("click", viewSomething);

function viewSomething() {
    if ( action == 1 ) {
        $("body").css("background", "honeydew");
        action = 2;
    } else if(action == 2) {
        $("body").css("background", "beige");
        action = 3;
    }
    else
    {
        $("body").css("background", "white");
        action = 1;
    }
  }

Fiddle

修改

var action = 0; $("input").on("click", viewSomething); var colorArr=["honeydew","beige","white"]; function viewSomething() { $("body").css("background",colorArr[action%colorArr.length]); action++; }

Updated demo

Answer 2

<强> HTML：

<a href="#" class="icon-white">click</a>

<强> JavaScript的：

var classes = new Array("icon-white","icon-red","icon-blue");
var idx = 0;

$("a").on("click", changeClass);

function changeClass() {
    idx++;
    var nextClass = classes[idx % classes.length];
    $("a").attr("class",nextClass);
}

<强>的jsfiddle：

http://jsfiddle.net/JmTLq/

<强>阐释：

在变量classes中，您希望以正确的顺序显示所有类。点击链接后，idx变量将计数，列表中的下一个课程将针对您的链接进行更新。这是在循环中执行的，因为idx变量总是向上计数并且使用idx % classes.length代码，您将确保在数组中始终选择了一个元素，并且您不会获得索引输出异常。< / p>

（对不起我的语法和英语，欢迎更正）

每个点击（点击）按钮在jquery中的不同事件

2 个答案: