javascript - 使用 jQuery 更改点击时文本的颜色

Question

我是 jQuery 新手，我不知道从哪里开始。在我的网页上，我有文本，我想将其放在顶部的四个方 block 中，用户可以单击其中的方 block ，这将更改文本的颜色。

我希望使用 CSS 制作方 block ，方 block 为红色、黄色、绿色和黑色。

由此，我需要使用 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”:“#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});
  });

});