Изменение цвета текста при нажатии с помощью jQuery

Question

Я новичок в jQuery, и я понятия не имею, с чего начать. На моей веб-странице у меня есть текст, и я хочу поставить на верхние четыре квадрата, где пользователь может щелкнуть по квадрату, и это изменит цвет текста.

Я надеюсь сделать квадраты с помощью CSS с квадратами, красными, желтыми, зелеными и черными.

От этого мне нужно создать подборщик цветов, используя jQuery, где пользователь щелкнет квадрат, и это изменит текст на соответствующий цвет.

Answer 1

http://jsbin.com/emical/1/edit

<div class="picker" data-color="red"></div> 
    <div class="picker" data-color="green"></div> 
    <div class="picker" data-color="blue"></div> 
    <div class="picker" data-color="black"></div> 

    <div id="test">TEST DIV THAT WILL CHANGE COLOR</div> 

... где, например: вместо "red" вы можете также использовать HEX: "#f00" или "# ff0000" или "RGB()", "RGBA()" ... и т.д. и т.п. :)

CSS:

.picker{ 

    cursor:pointer; 
    margin:3px; 
    width:30px; 
    height:30px; 
    float:left; 

} 

JQuery:

$('.picker').each(function(){ 
    $(this).css({background: $(this).data('color')}); // set BG color for every element 
}).click(function(){ 
    $('#test').css({color: $(this).data('color')}); // change Target's text color on click 
}); 

http://api.jquery.com/each/
http://api.jquery.com/css/
http://api.jquery.com/click/

или как это:

$('.picker').each(function(){ 

    var myColor = $(this).data('color'); 

    $(this).css({background: myColor }).click(function(){ 
    $('#test').css({color: myColor}); 
    }); 

});