Вопрос по jquery, javascript, html – Переключение между 3 классами с помощью toggleclass

4

У меня есть 3 изображения, между которыми я хочу переключиться. Я помещаю каждого из них в класс & amp; изменить его изображение в css. Теперь я могу переключаться между двумя классами, но когда я добавляю третий, код не работает. Любой класс из них может быть начальным.

    $('.one').click(function(){                             
        $(this).toggleClass("two");
        $(this).toggleClass("one");

    });
     $('.two').click(function(){                             
        $(this).toggleClass("one");
        $(this).toggleClass("two");

    });

Когда я добавлю эту строку:

        $(this).toggleClass("three"); 

Он вообще не переключается ....

Знаете ли вы метод, в котором я могу поместить все из них в одну функцию?

Благодарю.

Не могли бы вы привести практический пример того, что вы пытаетесь достичь и каков желаемый результат? fcalderan
так что вам нужно сделать последовательный цикл назначений классов, верно? fcalderan
У пользователя есть картинка X, например зеленая, когда он нажимает на нее, она должна быть желтой, когда он нажимает на нее, она должна быть красной. Если изображение уже было красным, оно должно быть зеленым, а затем желтым. Если он начал с желтого, оно должно быть красным, а затем зеленым, а затем желтым ... & amp; скоро. Sana Joseph

Ваш Ответ

3   ответа
13

Пример скрипки:http://jsfiddle.net/KdfEV/

Этот код позволит вам циклически проходить последовательность определенных классов

$('.one, .two, .three').click(function() {                             
    this.className = {
       three : 'one', one: 'two', two: 'three'
    }[this.className];
});
Error: User Rate Limit Exceeded Sana Joseph
Error: User Rate Limit Exceeded{ three : 'one', one: 'two', two: 'three' }Error: User Rate Limit ExceededtwoError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Sana Joseph
4
$('.one, .two, .three').click(function(){                             
        $(this).toggleClass("one, two, three");
    });
Error: User Rate Limit Exceededjsfiddle.net/OnlyHope/qbZ9q/1Error: User Rate Limit Exceeded Sana Joseph
0

Самый безопасный способ - удалить ненужные классы и добавить необходимый класс:

// Switch to class 'three'
$(this).removeClass('one').removeClass('two').addClass('three');

Похожие вопросы