調用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中的背景顏色。每個函數

回答

相關問題