Question

我目前有一个JS / Jquery＆amp;正在研究的HTML迷你项目。

第一个目标是单独更改和随机化我的<div>元素的背景颜色。我相信我已经正确地完成了这项工作，因为它似乎正在起作用。

最后一个目标是添加一个按钮，当“点击”时，它将反转每个<div>内部与随机背景颜色相关的字体颜色。

我被赋予了将颜色反转作为起点的功能。

单击我的按钮时，没有任何事情发生。一些帮助将不胜感激。

HTML：

<body>

<div class='inverseDiv'>
<h1>random text random text</h1>
</div>

<div class='inverseDiv'>
Soccer is my favorite sport<br>
</div>

<div class='inverseDiv'>
<h1>I like to eat hamburgers</h1>
<p>blah blah blah</p>
</div>

<div class='inverseDiv'>
<input type="button" class="btn btn-inverter" value="Click to change font color" id="myButton">
</div>

</body>

JS / jQuery的：

function randomColor() {
var hexValues = '0123456789ABCDEF'.split('');
var startColor = '#';
for (var i = 0; i < 6; i++ ) {
    startColor += hexValues[Math.round(Math.random() * 15)];
  }
return startColor;
}

$(function() {
    $(".inverseDiv").each(function() {
        $(this).css("background-color", randomColor());
    });
});

$(document).ready(function(){
  $('#myButton').click(function invertColor(hexTripletColor) {

var color = hexTripletColor;

color = color.substring(1); // remove #

color = parseInt(color, 16); // convert to integer

color = 0xFFFFFF ^ color; // invert three bytes

color = color.toString(16); // convert to hex

color = ("000000" + color).slice(-6); // pad with leading zeros

color = "#" + color; // prepend #

return color;
    }); 
});

链接到我的小提琴：http://jsfiddle.net/bchang89/r74j6/495/

Answer 1

在$(".inverseDiv").each(function() {处理程序中使用click将inverse逻辑应用于所有元素。

还可以使用data-*属性将颜色的hex值存储为data属性。

注意：在评论中提及Jorrex时，处理程序中的hexTripletColor参数将为event而不是color值。如果您想切换clicked元素，则可以使用$(this).closest('.inverseDiv')来操作元素的css。

＆＃13;

function randomColor() {
  var hexValues = '0123456789ABCDEF'.split('');
  var startColor = '#';
  for (var i = 0; i < 6; i++) {
    startColor += hexValues[Math.round(Math.random() * 15)];
  }
  return startColor;
}

$(function() {
  $(".inverseDiv").each(function() {
    var color = randomColor();
    $(this).css("background-color", color);
    $(this).data('color', color);
  });
});

$(document).ready(function() {
  $('#myButton').click(function invertColor() {
    $(".inverseDiv").each(function() {
      var color = $(this).data('color');
      color = color.substring(1); // remove #
      color = parseInt(color, 16); // convert to integer
      color = 0xFFFFFF ^ color; // invert three bytes
      color = color.toString(16); // convert to hex
      color = ("000000" + color).slice(-6); // pad with leading zeros
      color = "#" + color; // prepend #      
      $(this).css("background-color", color);
      $(this).data('color', color);
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class='inverseDiv'>
  <h1>random text random text</h1>
</div>
<div class='inverseDiv'>
  Soccer is my favorite sport
  <br>
</div>
<div class='inverseDiv'>
  <h1>I like to eat hamburgers</h1>
  <p>blah blah blah</p>
</div>
<div class='inverseDiv'>
  <input type="button" class="btn btn-inverter" value="Click to change font color" id="myButton">
</div>

＆＃13;

Updated fiddle

Answer 2

试试这个

ELECT USER(),CURRENT_USER();

它使用How to get hex color value rather than RGB value?中的方法将rgb值转换为十六进制。

jQuery - 根据<div>的随机背景颜色反转字体颜色的按钮

2 个答案: