Изменить функцию по второму клику

0

У меня есть некоторые Divs с классом "c01, c02, c03". Когда я нажимаю на обертку, сначала показываем c01, c02 показывает следующий, а затем c03 показывает последний. Но когда я снова нажимаю на обертку, сначала хочу скрыть c3, c2 next и c1 hide last.

Заранее спасибо.

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/

  • 0
    это c01, c02, c03 это классы или идентификаторы ??
  • 0
    с01, с02, с03 - это классы. Я использую то же имя с идентификаторами.
Теги:
click

5 ответов

0
Лучший ответ

Я думаю, что это ближе к вашим требованиям:

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/.

Поделиться
0

Обратите внимание, что вы можете добавить любое количество детей:

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/.

Поделиться
  • 0
    Спасибо за вашу помощь.
0

Это не лучший ответ, но надежда работает:

 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);
    });
Поделиться
0

Посмотрите на это 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);

});
Поделиться
  • 0
    Я не думаю, что это заставит С03 спрятаться первым.
  • 0
    Нет, проверьте скриптовую ссылку .. c03 - это та, что в последнем
Показать ещё 5 комментариев
-1

Это может быть довольно легко достигнуто с помощью глобальных переменных. Когда var showclass= True показывает их, а когда это ложно, делайте другой путь. В функции перевернуть переменную после показа или скрытия.

Поделиться
  • 1
    Ваш ответ должен продемонстрировать это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню