如何禁用运行的jQuery函数？

Question

我正在研究气球着色程序。

我有一些jQuery功能可以折换气球图像。当页面打开时，底部的白色气球可以一次着色一次，或者如果您按下滚轮按钮，则可以将鼠标悬停在上面，一次全部着色。我想单击“关闭”按钮以停止滚轮功能，但需要时可以再次启动它。

我尝试过计时器以及几乎所有其他方法，但没有发现任何有效的方法。该代码在上面的链接中。预先谢谢！

var colorNow = "https://balloonmaster.com/color-change/latex/1.png";

$(".balloons").click(function(event) {
  $(event.target).attr('src', colorNow);
})

var $palette = $("#palette");
$palette.click(function(event) {
  $color = $(event.target);
  colorNow = $color.attr('src');
})

function Roller() {
  var colorNow = "https://balloonmaster.com/color-change/latex/1.png";
  $(".balloons").mouseover(function(event) {
    $(event.target).attr('src', colorNow);
  })
  var $palette = $("#palette");
  $palette.click(function(event) {
    $color = $(event.target);
    colorNow = $color.attr('src');
  })
}

function clearRoller() {
  //???????????????
  // I need script to remove or disable the Roller function
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="balloons">
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 20px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 60px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 100px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 140px;"></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 180px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 220px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 260px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 300px;" title=""></div>
</div>
<div id="palette">
  <div><img src="https://balloonmaster.com/color-change/latex/1.png" width="40" style="position: absolute; top: 100px; left: 20px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 100px; left: 60px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/3.png" width="40" style="position: absolute; top: 100px; left: 100px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/4.png" width="40" style="position: absolute; top: 100px; left: 140px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/5.png" width="40" style="position: absolute; top: 100px; left: 180px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/6.png" width="40" style="position: absolute; top: 100px; left: 220px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/7.png" width="40" style="position: absolute; top: 100px; left: 260px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/8.png" width="40" style="position: absolute; top: 100px; left: 300px;" title=""></div>
</div>

Answer 1

我建议为气球设置背景图像，并将每个图像保持为一个div。这样一来，您就可以知道何时单击它，也可以直接从中获取数据。

您可以添加一个复选框来确定您是否处于过渡状态以添加或删除侦听器。

let currentColor = null;

const handleRollOver = (event) => {
  $(event.target).attr('data-color', currentColor); // set color
};

$('.palette .balloon').click((e) => {
  $('.palette .balloon').removeClass('balloon-active');
  currentColor = $(e.target).addClass('balloon-active').attr('data-color'); // get color
});

$('.canvas .balloon').click((e) => {
  $(e.target).attr('data-color', currentColor); // set color
});

$('.mode-roller').on('change', (e) => {
  if (e.target.checked) {
    $('.canvas .balloon').on('mouseover', handleRollOver); // enable
  } else {
    $('.canvas .balloon').off('mouseover', handleRollOver); // disable
  }
});

body { padding: 0.5em; font-size: smaller; }
body h1 { margin-top: 0.25em; }

.balloon {
  display: inline-block;
  background-image: url('https://i.stack.imgur.com/JQ4i3.png');
  background-repeat: no-repeat;
  width: 2.5em;
  height: 2.5em;
  background-size: 10em;
  margin-right: -0.25em;
}

.balloon:hover { cursor: pointer; }

.balloon[data-color="black"]  { background-position:  0.0em   0.0px; }
.balloon[data-color="white"]  { background-position: -2.5em   0.0px; }
.balloon[data-color="red"]    { background-position: -5.0em   0.0px; }
.balloon[data-color="orange"] { background-position: -7.5em   0.0px; }
.balloon[data-color="yellow"] { background-position:  0.0em  -2.5em; }
.balloon[data-color="green"]  { background-position: -2.5em  -2.5em; }
.balloon[data-color="blue"]   { background-position: -5.0em  -2.5em; }
.balloon[data-color="violet"] { background-position: -7.5em  -2.5em; }

.balloon-active { background-color: #DD7; }

form { border: thin solid grey; padding: 0.33em; margin-top: 0.667em; }
form h2 {margin-top: 0.25em; }
.form-field label { display: inline-block; font-weight: bold; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Balloon Roller</h1>
<div class="palette">
  <div class="balloon" data-color="black"></div>
  <div class="balloon" data-color="white"></div>
  <div class="balloon" data-color="red"></div>
  <div class="balloon" data-color="orange"></div>
  <div class="balloon" data-color="yellow"></div>
  <div class="balloon" data-color="green"></div>
  <div class="balloon" data-color="blue"></div>
  <div class="balloon" data-color="violet"></div>
</div>
<div class="canvas">
  <div class="balloon" data-color="white"></div>
  <div class="balloon" data-color="white"></div>
  <div class="balloon" data-color="white"></div>
  <div class="balloon" data-color="white"></div>
  <div class="balloon" data-color="white"></div>
  <div class="balloon" data-color="white"></div>
  <div class="balloon" data-color="white"></div>
  <div class="balloon" data-color="white"></div>
</div>
<form>
  <h2>Options</h2>
  <div class="form-field">
    <label>Roller Mode</label> <input type="checkbox" class="mode-roller">
  </div>
</form>

---

此外，我还从您的图像中创建了一个Spritesheet，可在此处找到：

Answer 2

这是什么？我只是将鼠标悬停更改为“ on”（打开）-使用动态元素。滚轮按钮的功能现在仅切换“气球”类元素的“滚子”类。

编辑：Polywhirl先生在这里所做的工作要优雅得多，.off的性能也比总是活动的事件侦听器好。

https://jsfiddle.net/chada090/gvr8o5b9/2

var colorNow = "https://balloonmaster.com/color-change/latex/1.png";

$(".balloons").click(function(event) {
  $(event.target).attr('src', colorNow);
})

var $palette = $("#palette");
$palette.click(function(event) {
  $color = $(event.target);
  colorNow = $color.attr('src');
})
$("body").on("mouseover",".balloons.roller",function(event) {
    $(event.target).attr('src', colorNow);
})

function Roller() {
  $(".balloons").toggleClass("roller");
}

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="balloons">
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 20px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 60px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 100px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 140px;"></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 180px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 220px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 260px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 220px; left: 300px;" title=""></div>
</div>
<div id="palette">
  <div><img src="https://balloonmaster.com/color-change/latex/1.png" width="40" style="position: absolute; top: 100px; left: 20px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/2.png" width="40" style="position: absolute; top: 100px; left: 60px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/3.png" width="40" style="position: absolute; top: 100px; left: 100px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/4.png" width="40" style="position: absolute; top: 100px; left: 140px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/5.png" width="40" style="position: absolute; top: 100px; left: 180px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/6.png" width="40" style="position: absolute; top: 100px; left: 220px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/7.png" width="40" style="position: absolute; top: 100px; left: 260px;" title=""></div>
  <div><img src="https://balloonmaster.com/color-change/latex/8.png" width="40" style="position: absolute; top: 100px; left: 300px;" title=""></div>
</div>
<button onclick="Roller()">roller</button>