Question

我正在做一个蚀刻项目，我的问题是，只有当我单击随机按钮时颜色才会改变，我希望每当将鼠标悬停在网格上的其他单元格时颜色就会改变。

以下是一个副本：https://repl.it/@antgotfan/etch-a-sketch -显示所有内容（html，css，js和jquery）

链接到我希望我的蚀刻做的事情：https://codepen.io/beumsk/pen/dVWPOW?editors=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" })
  });
}

仅当激活随机按钮时颜色才会改变

1 个答案: