jQuery - 기능 스틱을 만들기 위해 버튼을 두 번 이상 누르십시오.

Question

div의 "Etch-a-Sketch"스타일 블록을 만들려고합니다. 버튼 누름을 통해 "erase()"또는 "draw()"함수가 호출되면 몇 초 동안 작동하거나 버튼을 두 번 누를 때까지 불투명도를 0.1만큼 증가 또는 감소시킵니다. 나는 한 번 누를 수 있고 다른 기능이 멈출 때까지 hovered 요소의 불투명도를 계속 늘리거나 줄이기 위해 노력하고있다. 내가 여기서 무엇을 놓치고 있니?

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

문제는 erase()에서

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

를 호출하면 이전 호버 핸들러를 제거하지 않습니다. 상자 위로 마우스를 가져 가면 이darken과 lighten입니다. 문제는 그것은`erase` 기능에, 당신이 게시 코드에없는 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>