Альтернатива между классами добавил JQuery - PullRequest
Новая
       11

Альтернатива между классами добавил JQuery

2 голосов
/ 18 декабря 2010

У меня есть 3 элемента div, скрипт jQuery добавляет класс при нажатии элемента div: 

.red{ background-color: red; }

Что я хотел бы сделать, это изменить jQuery так, чтобы однажды. redкласс добавляется и в следующий раз он добавит .blue, .red, .blue и так далее ...

Мой сценарий и вы можете в этой демонстрации это: 

var $a = $('.box');
$a.click(function(){

        $(this).addClass('red');
});

Извините, я не делюсь больше, но мои ужасные попытки просто запутают.

Надеюсь, я дал понять, если нет, спросите !!

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

ОБНОВЛЕНИЕ:

Я думаю, что вопрос не был достаточно ясен, поэтому я попытаюсь объяснить дальше.

Какими бы необходимыми были в основном три деления, первый щелчок превращает нажатый делитель в красный , второй превращает нажатый в синий , икрасный и т. д., они должны переключаться (переходите в красный или синий цвет при нажатии, только первый щелчок учитывается)

1 Ответ

7 голосов
/ 18 декабря 2010

РЕДАКТИРОВАТЬ: Исходя из комментариев ниже, звучит так, как будто вы хотите, чтобы цвет чередовался для каждого последующего элемента, по которому щелкают, и его нельзя почитать.

Это должно сделатьit:

Пример: http://jsfiddle.net/patrick_dw/zUdWq/

$('a').click((function() {
    var i = 0;
    var colors = ['blue','red'];
    return function() {
        $(this).addClass( colors[i = ++i % 2] ).unbind('click');
    };
})());

Используется замыкание для обтекания переменных.Если вы не хотите / нуждаетесь в этом, вот то же самое без закрытия.

Пример: http://jsfiddle.net/patrick_dw/zUdWq/1/

var i = 0;
var colors = ['blue','red'];

$('a').click(function() {
    $(this).addClass( colors[i = ++i % 2] ).unbind('click');
});

Исходный ответ: 

$a.addClass('red').click(function(){
    $(this).toggleClass('red blue');
});

Это начнется с добавления класса red при загрузке страницы, после чего будет переключаться red и blue при каждом нажатии.

Если вы хотите начать без какого-либо класса на предмете, то вы можете сделать это: 

$a.click(function(){
    if( !this.className ) {
        this.className = 'red';
    } else {
        $(this).toggleClass('red blue');
    }
});
...