jQuery - нажать кнопку два раза или больше, чтобы сделать функцию.

Question

Я пытаюсь создать блок стилей «Etch-a-sketch». Когда функции «erase()» или «draw()» вызываются с помощью нажатия кнопки, они будут работать в течение нескольких секунд или только увеличивают или уменьшают непрозрачность на .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>