Как я могу отключить функцию 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

что по этому поводу? Я только что изменил указатель мыши на "on" - работает с элементами Dynami c. Функция для кнопки ролика теперь только переключает класс «ролик» для элемента класса «воздушные шары».

РЕДАКТИРОВАТЬ: Мистер Поливирл сделал здесь гораздо более элегантную работу, .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:

Answer 2

Я рекомендую установить фоновое изображение для воздушных шаров и хранить их как один элемент 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>

---

Кроме того, я создал электронную таблицу из ваших изображений, которая доступна здесь: