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

});