使用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}); 
    }); 

});