调用 JS 函数以反转 jQuery .each 函数内的背景色

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

本文关键字：函数 each jQuery 背景色 JS 调用      更新时间：2023-09-26

这篇文章中有一个关于在jQuery文档就绪函数中调用JS函数的问题;但是，它没有回答我的问题。

我正在尝试编写一个函数，该函数在 html 文档中循环访问div，为div 背景提供随机颜色。这部分正在工作。在下一步中，我想使用反转颜色函数反转divs 背景颜色;但是，我无法弄清楚如何将此函数合并到 jQuery 代码中。

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

我尝试在 .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 代码和输出可以在此小提琴中查看：

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

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

相关文章：