Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Подскажите как по клику можно переберать классами

306
06 апреля 2013 года
order.daemon
275 / / 11.05.2007
Если форма с классом AAA по ее ПЕРВОМУ клику мне нужно задать ей класс №1, по второму - №2 и так до 10.
Подскажите как организовать такой перебор.


 
Код:
$('.AAA').click(function() {

$(this).addClass('k1');

});
8
06 апреля 2013 года
mfender
3.5K / / 15.06.2005
Например так:


Код:
<style>
.AAA{border: 1px solid black; width: 100px; height: 100px; background-color: white;}
.kl1{background-color: #eeeeee !important;}
.kl2{background-color: #dddddd !important;}
.kl3{background-color: #cccccc !important;}
.kl4{background-color: #bbbbbb !important;}
.kl5{background-color: #aaaaaa !important;}
.kl6{background-color: #999999 !important;}
.kl7{background-color: #888888 !important;}
.kl8{background-color: #777777 !important;}
.kl9{background-color: #666666 !important;}
.kl10{background-color: #555555 !important;}
</style>
 
Код:
<div class='AAA'></div>
 
Код:
<script>
clickCnt = 0;

$('.AAA').bind('click', function(e){
    $('.AAA').removeClass('kl'+clickCnt);
    ++clickCnt;
    if(clickCnt>10) clickCnt = 1;
    $('.AAA').addClass('kl'+clickCnt);
});
</script>
306
06 апреля 2013 года
order.daemon
275 / / 11.05.2007
Большое спс, скрипт работает, но как можно его применить для каждого пункта списка???

 
Код:
clickCnt = 0;
$('ul li').bind('click', function(e){
    $(this).removeClass('kl'+clickCnt);
    ++clickCnt;
    if(clickCnt>10) clickCnt = 1;
    $(this).addClass('kl'+clickCnt);
});
8
06 апреля 2013 года
mfender
3.5K / / 15.06.2005
Значит нужно счётчик вонзить в каждый элемент списка, и отсчитывать по нему.


Код:
<style>
div.AAA ul li{
    color: black;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;  
    font-size: .9em;
    font-weight: bold;
    font-family: sans-serif;
}
.kl1{color: #111111 !important;}
.kl2{color: #222222 !important;}
.kl3{color: #333333 !important;}
.kl4{color: #444444 !important;}
.kl5{color: #555555 !important;}
.kl6{color: #666666 !important;}
.kl7{color: #777777 !important;}
.kl8{color: #888888 !important;}
.kl9{color: #999999 !important;}
.kl10{color: #aaaaaa !important;}
</style>
 
Код:
<div class='AAA'>
<ul><li>Point 1</li><li>Point 2</li><li>Point 3</li><li>Point 4</li><li>Point 5</li><li>Point 6</li><li>Point 7</li><li>Point 8</li><li>Point 9</li><li>Point 10</li></ul>
</div>
Код:
<script>
init();

$('div.AAA ul li').bind('click', function(e){
    $(this).removeClass('kl'+this.internalCounter);
    ++this.internalCounter;
    if(this.internalCounter>10) this.internalCounter = 1;
    $(this).addClass('kl'+this.internalCounter).text(this.constText + ' (' + $(this).css('color') + ')');
});

function init(){
// Тут в цикле каждому элементу списка добавим внутреннее поле internalCounter, который и будет счётчиком.
// поле constText - для вкусняшки, будем хранить там исходный текст.
    $.each($('div.AAA ul li'), function(){
        $.extend(this, {internalCounter:0, constText:$(this).text()});
    });
}

</script>

Знаете кого-то, кто может ответить? Поделитесь с ним ссылкой.

Ваш ответ

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог