顏色僅在激活隨機按鈕時更改

Question

我正在做一個Etch-a-sketch項目，我的問題是，當我點擊隨機按鈕時顏色只會改變，我希望每當我將鼠標懸停在網格上的不同單元格時它就會改變。

這是一個repl： https ： //repl.it/@antgotfan/etch-a-sketch - 這顯示了所有內容（html，css，js和jquery）

鏈接到我想要的蝕刻素描： https ： //codepen.io/beumsk/pen/dVWPOW？編輯= 0110

我嘗試使用event.target，但我真的無法理解事件正在做什么。

$randomButton.on("click", getRandomColors);
$resetButton.on("click", reset);

/*--------------------------- Corresponding to Event listeners ---------------------------*/
function getGradient(event) {

}

function getRandomColors() {
    let colorR = Math.floor((Math.random() * 256));
    let colorG = Math.floor((Math.random() * 256));
    let colorB = Math.floor((Math.random() * 256));
    $(".cell").hover((event) => $(event.target).css({
                                                    "backgroundColor": `rgb(${colorR}, ${colorG}, ${colorB})`,
                                                    "opacity": "1"}));
}

Answer 1

您必須在綁定事件處理程序之前在事件處理程序中生成顏色（即觸發事件時）。

function getRandomColors() {
  $(".cell").hover(function (event) {
    let colorR = Math.floor((Math.random() * 256));
    let colorG = Math.floor((Math.random() * 256));
    let colorB = Math.floor((Math.random() * 256));
    $(event.target).css({ "backgroundColor": `rgb(${colorR}, ${colorG}, ${colorB})`, "opacity": "1" })
  });
}