第二次点击更改功能答案

【问题标题】：Change function on second click第二次点击更改功能
【发布时间】：2013-12-02 18:03:10
【问题描述】：

我有一些类别为“c01、c02、c03”的 Div。当我点击换行时，首先显示 c01，然后显示 c02，最后显示 c03。但是当我再次点击 wrap 时，我想先隐藏 c3，然后隐藏 c2，最后隐藏 c1。

提前致谢。

var wrap = $('#wrap'),
    c01 = $('#c01'),
    c02 = $('#c02'),
    c03 = $('#c03');

wrap.click(function () {
    setTimeout(function () {
        c01.toggleClass('c01');
    }, 0);
    setTimeout(function () {
        c02.toggleClass('c02');
    }, 200);
    setTimeout(function () {
        c03.toggleClass('c03');
    }, 400);
});

你可以在http://jsfiddle.net/tZyMY/看到

【问题讨论】：

是 c01, c02,c03 是类还是 Id 的？？
c01, c02, c03 是类。我使用与 ID 相同的名称。

标签： jquery click

【解决方案1】：

我猜这个更接近你的要求：

var children = $('#wrap div'),
    dir = -1,
    idx = -1, 
    tid;
$('#wrap').click(function () {
    tid && clearTimeout(tid);
    dir = -dir;
    idx += dir;
    (function fn() {
        children.eq(idx).toggle(dir > 0);
        idx += dir;
        if (idx > -1 && idx < children.length) {
            tid = setTimeout(fn, 100);
        }
    })();
});

同样，您可以添加任意数量的 DIV。查看演示：http://jsfiddle.net/wared/6AJzP/。

【讨论】：

【解决方案2】：

这不是最好的答案，但希望有效：

 wrap.click(function () {
        var time = '';

        if(c01.hasClass('c01')){
            var time = 400;
        }else{
            var time = 0;    
        }

        setTimeout(function () {
            c01.toggleClass('c01');
        }, time);

        setTimeout(function () {
            c02.toggleClass('c02');
        }, 200);

        if(c03.hasClass('c03')){
            var time = 0;
        }else{
            var time = 400;    
        }
        setTimeout(function () {
            c03.toggleClass('c03');
        }, time);
    });

【讨论】：

【解决方案3】：

请注意，您可以添加任意数量的子代：

var children = $('#wrap div'),
    dir = 1;
$('#wrap').one('click', function click() {
    var idx;
    switch (dir) {
        case 1: idx = 0; break;
        case -1: idx = children.length - 1; break;
    }
    setTimeout(function fn() {
        children.eq(idx).toggle();
        idx += dir;
        if (idx > -1 && idx < children.length) {
            setTimeout(fn, idx * 200);
        } else {
            dir = -dir;
            $('#wrap').one('click', click);
        }
    }, idx * 200);
});

查看演示：http://jsfiddle.net/wared/YrUWs/。

【讨论】：

感谢您的帮助。

【解决方案4】：

看看这个http://jsfiddle.net/DNzQy/2/

var wrap = $('#wrap'),
    c01 = $('#c01'),
    c02 = $('#c02'),
    c03 = $('#c03');

var toggle = 1;

wrap.click(function () {
    if (toggle == 1) {
        toggleC01 = 400;
        toggleC02 = 200;
        toggleC03 = 0;
        toggle = 0;
    } else {
        toggleC01 = 0;
        toggleC02 = 200;
        toggleC03 = 400;
        toggle = 1;
    }
    setTimeout(function () {
        c01.toggleClass('c01');
    }, toggleC01);
    setTimeout(function () {
        c02.toggleClass('c02');
    }, toggleC02);
    setTimeout(function () {
        c03.toggleClass('c03');
    }, toggleC03);

});

【讨论】：

我认为这不会让 c03 先隐藏。
不检查小提琴链接.. c03 是最后一个绿色的
我明白了。但是第二次点击黄色框，c3并没有先隐藏。
感谢您的帮助。

【解决方案5】：

这可以通过全局变量轻松实现。当 var showClass = True 显示它们，当它为假时，则以其他方式显示。在函数中显示或隐藏后翻转变量。

【讨论】：

你的回答应该能证明这一点。