调用 JS 函数以反转 jQuery .each 函数中的背景颜色答案

【问题标题】：Calling a JS function to invert background-color inside a jQuery .each function调用 JS 函数以反转 jQuery .each 函数中的背景颜色
【发布时间】：2016-05-24 02:22:59
【问题描述】：

this 帖子中有一个关于在 jQuery 文档就绪函数中调用 JS 函数的问题；但是，它没有回答我的问题。

我正在尝试编写一个循环遍历 html 文档中的 div 的函数，为 div 背景提供随机颜色。这部分正在工作。在下一步中，我想使用 invertColor 函数反转 divs 背景颜色；但是，我不知道如何将此函数合并到 jQuery 代码中。

工作代码应首先为每个 div 分配一个随机颜色，然后使用 invertColor 函数反转该颜色。

我尝试在 .each 函数的内部和外部调用 invertColor 函数。

这是当前的JS代码：

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

$(document).ready(function() {
    $("div").each(function() {
        var color = ["#b27485", "#74b2a1", "#cedbd9", "#abece4", "#ecabb3", "#1cdb4f", "#7e8dab", ];
        var rand = Math.floor(Math.random() * color.length);
        $(this).css("background-color", color[rand]);
        $(this).css(invertColor(color));
        $(function() {
            invertedColor(color);
        });
    });
});

HTML代码和输出可以在这个fiddle查看：

【问题讨论】：

标签： javascript jquery each

【解决方案1】：

invertColor 不返回任何内容，因此您正在设置css(undefined);，我不确定hexTripletColor 的定义位置。而且您将数组而不是数组中的颜色传递给您的方法。 $(this).css(invertColor(color));

所以您正在寻找类似的东西，我将 color 设置为您计算的反转值，不确定您到底想设置什么。

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;
  return {
    color: color
  };
}

$(document).ready(function() {

  $("div").each(function() {
    var color = ["#b27485", "#74b2a1", "#cedbd9", "#abece4", "#ecabb3", "#1cdb4f", "#7e8dab", ];
    var rand = Math.floor(Math.random() * color.length);
    $(this).css("background-color", color[rand]);
    $(this).css(invertColor(color[rand]));
  });

});

【讨论】：

对，对不起，我已经编辑了：hexTripletColor 是传递给函数的参数。'
谢谢，这让我到了那里。仅更改您建议的代码是我需要返回 "background-color": color 以反转背景而不是文本。非常感谢！
我明白你在说什么，但这是我的任务。首先为 div 选择随机颜色，然后将这些颜色反转三个字节——我还将反转文本。再次感谢您的帮助！

【解决方案2】：

invertColor() 不返回任何内容，因此只需在末尾添加一个 return 语句，如下所示：

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;

    return color;
}

然后将$(this).css(invertColor(color));改为$(this).css("background-color", invertColor(color));

【讨论】：