Динамическое изменение CSS

Question

Я создал матрицу из ящиков размером 5x5. Я бы хотел щелкнуть ссылку, и эта ссылка динамически меняет цвет после того, как я щелкнул его (a: побывал) - по одному. Однако в моем текущем коде он меняет цвет на все ссылки, а не на тот, который я нажал.

HTML:

<ul id="rowOne" class="center"> 
    <li><a href="#">$100</a></li> 
    <li><a href="#">$100</a></li> 
    <li><a href="#">$100</a></li> 
    <li><a href="#">$100</a></li> 
    <li><a href="#">$100</a></li> 
</ul> 

Jquery:

$('a').click(function(){ 
$.each('a').css({'color':'#002290'}); 
}); 

Любые предложения?

Answer 1

Вы должны сделать это -

$('a').click(function(){ 
    $(this).css({'color':'#002290'}); 
}); 

Answer 2

Ваш код говорит: "Когда любой <a> щелкают, перебрать все<a> элементы ($.each...) и изменить свой CSS". Вам нужно, чтобы применить изменения только к щелкнул элемент, который доступен через this в обратных вызовах событий JQuery в:

$('a').click(function(){ 
    $(this).css({'color':'#002290'}); 
}); 

Вы также можете опустить кавычки ключей (color) при создании объекта (если свойство Безразлично «т содержат дефис) ...

$(this).css({color: '#002290'}); 

... или опустить объект целиком, когда вы настраиваете один атрибут и передать имя и значение в виде двух отдельных параметров строки:

$(this).css('color', '#002290'); 

Answer 3

Вы снова меняете все теги a.Dont Забудьте удалить все цвета тегов перед нажатием. .

$('a').click(function(){  
    $('a').css('color', '');   
    $(this).css({'color':'#002290'}); //current tag 
});