javascript - jQueryを使用してクリック時にテキストの色を変更する

Question

私はjQueryが初めてで、どこから始めればよいかわかりません。私のウェブページにはテキストがあり、ユーザーが四角形をクリックできる上部の 4 つの四角形を配置すると、テキストの色が変わります。

赤、黄、緑、黒の四角形で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});
  });

});