jQuery - 必須按兩次或多次按鈕才能製作功能棒

Question

我正在嘗試製作一個「Etch-a-sketch」風格的div塊。當通過按鈕調用「擦除（）」或「繪圖（）」功能時，它們將工作幾秒鐘，或者僅通過.1增加或減少不透明度，直到我雙擊按鈕。我正在嘗試使它可以被按下一次，並繼續增加/減少懸停元素上的不透明度，直到其他功能停止。我在這裏錯過了什麼？

function erase(){ 
    $('.erase').toggleClass('draw').toggleClass('erase'); 
    $('.box').hover(lighten); 
} 

function draw(){ 
    $('.erase').toggleClass('erase').toggleClass('draw'); 
    $('.box').hover(darken); 
} 

function darken(){ 
    var currentDarkness = +$(this).css('opacity'); 
    if (currentDarkness <= 1) currentDarkness += .10; 
    $(this).css({"opacity": currentDarkness}); 
} 

function lighten(){ 
    var currentDarkness = +$(this).css('opacity'); 
    if (currentDarkness >= 0) currentDarkness -= .10; 
    $(this).css({"opacity": currentDarkness}); 
} 
$('.erase').off('click').on('click', erase); 
$('.draw').off('click').on('click', draw); 

全碼 - https://jsfiddle.net/weslex/ftwaw27e/

Answer 1

的問題是，調用

$('.box').hover(lighten); 

在 erase()

不會刪除舊的懸停處理程序。所以當你把鼠標懸停在一個盒子上時，它會呼叫都darken和lighten。見How to remove $.hover event added by jQuery?

$(document).ready(function() { 
 
    createGrid(16); 
 
    $(".box").hover(darken); 
 

 
}); 
 

 
function erase() { 
 
    $('.erase').toggleClass('draw').toggleClass('erase'); 
 
    $('.box').off("mouseenter mouseleave").hover(lighten); 
 
} 
 

 
function draw() { 
 
    $('.erase').toggleClass('erase').toggleClass('draw'); 
 
    $('.box').off("mouseenter mouseleave").hover(darken); 
 
} 
 

 
function darken() { 
 
    var currentDarkness = +$(this).css('opacity'); 
 
    if (currentDarkness < 1) currentDarkness += .10; 
 
    $(this).css({ 
 
    "opacity": currentDarkness 
 
    }); 
 
} 
 

 
function lighten() { 
 
    var currentDarkness = +$(this).css('opacity'); 
 
    if (currentDarkness >= 0) currentDarkness -= .10; 
 
    $(this).css({ 
 
    "opacity": currentDarkness 
 
    }); 
 
} 
 

 
function createGrid(sqNum) { 
 
    var totalSquares = sqNum * sqNum; 
 
    $('#canvas').empty(); 
 
    for (var i = 0; i < totalSquares; i++) { 
 
    $("#canvas").append("<div class='box'></div>"); 
 
    } 
 
} 
 

 
function reset() { 
 
    $('#canvas').empty(); 
 
    createGrid(16); 
 
    $(".box").hover(darken); 
 
} 
 

 
function newGrid() { 
 
    var sqNum = prompt("How many boxes do you want on each side?"); 
 
    if (sqNum < 1 || sqNum == null || sqNum > 150) { 
 
    var sqNum = prompt("That number is out of range. How many boxes do you want on each side?"); 
 
    } else { 
 
    createGrid(sqNum); 
 
    var totalSquares = sqNum * sqNum; 
 
    var boxSize = 800/sqNum; 
 
    $(".box").css({ 
 
     "width": boxSize + 'px' 
 
    }); 
 
    $(".box").css({ 
 
     "height": boxSize + 'px' 
 
    }); 
 
    $(".box").hover(darken); 
 
    } 
 
} 
 

 
$('.erase').off('click').on('click', erase); 
 
$('.draw').off('click').on('click', draw);

h1 { 
 
    text-align: center; 
 
} 
 
#canvas { 
 
    background-color: #FFF; 
 
    border: 1px solid black; 
 
) height: 800px; 
 
    line-height: 0; 
 
    margin: 30px auto; 
 
    width: 800px; 
 
} 
 
.controls { 
 
    display: block; 
 
    margin: 10px auto; 
 
    width: 15%; 
 
} 
 
.controls > button { 
 
    background-color: #DEDEDE; 
 
    border-radius: 5px; 
 
    display: inline-block; 
 
    margin: 2px auto; 
 
} 
 
.lighten { 
 
    background-color: #9999FF; 
 
} 
 
.box { 
 
    background-color: black; 
 
    display: inline-block; 
 
    height: 50px; 
 
    margin: 0; 
 
    opacity: 0; 
 
    padding: 0; 
 
    width: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='canvas'> 
 

 
</div> 
 

 
<div class='controls'> 
 
    <button onclick='reset()'>Reset</button> 
 
    <button onclick='newGrid()'>Select Grid</button> 
 
    <button class='erase'>Erase</button>' 
 
    <button class='draw'>Draw</button>' 
 
</div>