调用JS函数来颠倒jQuery中的背景颜色。每个函数

this有一个关于在jQuery文档就绪函数中调用JS函数的问题;但是，它不回答我的问题。调用JS函数来颠倒jQuery中的背景颜色。每个函数

我想写一个函数，循环在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查看：

来源

2016-02-12 Mindi Torrey

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

});

来源

2016-02-12 19:53:00 epascarello

右键对不起，我已经编辑： hexTripletColor是传递给函数的参数。' –

谢谢，这让我在那里。只改变你的建议代码是我需要返回“背景颜色”：颜色来反转背景，而不是文字。非常感谢！ –

我明白你在说什么，但这是我的任务。首先为div选择随机颜色，然后将这些颜色反转三个字节 - 我也将反转文本。再一次感谢你的帮助！ –

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

来源

2016-02-12 19:55:32

调用JS函数来颠倒jQuery中的背景颜色。每个函数

回答

相关问题