Подскажите как по клику можно переберать классами
Если форма с классом AAA по ее ПЕРВОМУ клику мне нужно задать ей класс №1, по второму - №2 и так до 10.
Подскажите как организовать такой перебор.
Подскажите как организовать такой перебор.
Код:
$('.AAA').click(function() {
$(this).addClass('k1');
});
$(this).addClass('k1');
});
Например так:
Код:
<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>
.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>
clickCnt = 0;
$('.AAA').bind('click', function(e){
$('.AAA').removeClass('kl'+clickCnt);
++clickCnt;
if(clickCnt>10) clickCnt = 1;
$('.AAA').addClass('kl'+clickCnt);
});
</script>
Большое спс, скрипт работает, но как можно его применить для каждого пункта списка???
Код:
clickCnt = 0;
$('ul li').bind('click', function(e){
$(this).removeClass('kl'+clickCnt);
++clickCnt;
if(clickCnt>10) clickCnt = 1;
$(this).addClass('kl'+clickCnt);
});
$('ul li').bind('click', function(e){
$(this).removeClass('kl'+clickCnt);
++clickCnt;
if(clickCnt>10) clickCnt = 1;
$(this).addClass('kl'+clickCnt);
});
Значит нужно счётчик вонзить в каждый элемент списка, и отсчитывать по нему.
Код:
<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.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>
<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>
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>