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

Question

this post 中有一个关于在 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:

中查看

Answer 1

invertColor 没有 return 任何东西，所以你正在设置 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]));
  });

});

Answer 2

invertColor() 没有 return 任何东西，所以只需在末尾添加一个 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));

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

Calling a JS function to invert background-color inside a jQuery .each function

javascript

each

jquery