如何禁用运行中的 jQuery 函数？

Question

我正在开发一个气球着色程序。

我有一些 jQuery 函数可以交换气球图像。当页面打开时，底部的白色气球可以一次着色一个，或者如果您点击滚轮按钮，您可以将鼠标悬停在上面并立即为它们着色。我想单击关闭按钮停止滚轮功能，但如果需要可以再次启动它。

我已经尝试了定时器和几乎所有其他方法，但我没有找到任何有效的方法。代码在link上面。提前致谢！

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" - 适用于动态元素。滚轮按钮的功能现在只为 "balloons" class 元素切换 "roller" class。

编辑：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>

如何禁用运行中的 jQuery 函数？

How can I disable a jQuery function from running?

javascript

jquery

function

mouseover

如何禁用 运行 中的 jQuery 函数？

How can I disable a jQuery function from running?

javascript

jquery

function

mouseover

如何禁用运行中的 jQuery 函数？