jquery - 使用类更改字体颜色

Question

我想知道如何使用小方形 div 而不是下拉菜单更改字体颜色我可以使用下拉菜单将字体更改为我想要的任何颜色但我不知道如何使用方形 div 更改它可以使用 div 方 block 更改颜色这是我的代码

下拉脚本

$("#foo").change(function() {
  //alert($(this).val());
  $('.fid').css("color", $(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="foo">
  <option value=" #ab3fdd">purple</option>
  <option value="yellow ">yellow </option>
  <option value="red ">red </option>
  <option value="orange">orange</option>
</select>

<div id="any" class="fid">
  hello world
</div>

这是我想用来改变颜色的:

CSS

.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

HTML

<div id=fid>
  <div class="foo blue"></div>
  <div class="foo purple"></div>
  <div class="foo wine"></div>
</div>

Answer 1

您也可以使用data-color。参见 Updated Fiddle

当你点击正方形时，它会获取他的数据颜色值，你会得到你的结果:)，如果你有任何问题，请告诉我。

HTML

<div class="fid">
  hello world
</div>

<div id="fid" >
  <div class="foo blue" data-color="blue"></div>
  <div class="foo purple" data-color="purple"></div>
  <div class="foo wine" data-color="wine"></div>
</div>

CSS

.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.blue {
  background: #13b4ff;
}
.purple {
  background: #ab3fdd;
}
.wine {
  background: #ae163e;
}

JQUERY

$('.foo').click(function(){
    $('.fid').css("color", $(this).attr('data-color'));
});