Question

我是jQuery的新手，我不知道从哪里开始。在我的网页上，我有文字，我想放在前四个方格，用户可以点击一个方格，这将改变文本的颜色。

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

由此我需要使用jQuery创建一个颜色选择器，用户将单击一个正方形，这将把文本更改为适当的颜色。

Answer 1

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

});

使用jQuery更改单击文本的颜色

1 个答案: