javascript - jQuery - 必须按下按钮两次或更多次才能使功能保持不变

Question

我正在尝试制作一个“Etch-a-sketch”样式的 div block 。当通过按下按钮调用“erase()”或“draw()”函数时，它们将工作几秒钟或仅将不透明度增加或减少 0.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);

in erase() 不会删除旧的悬停处理程序。因此，当您将鼠标悬停在一个框上时，它会调用 both 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>