调用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查看:
答
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));
右键对不起,我已经编辑: hexTripletColor是传递给函数的参数。' –
谢谢,这让我在那里。只改变你的建议代码是我需要返回“背景颜色”:颜色来反转背景,而不是文字。非常感谢! –
我明白你在说什么,但这是我的任务。首先为div选择随机颜色,然后将这些颜色反转三个字节 - 我也将反转文本。再一次感谢你的帮助! –