Я хочу, чтобы метки подсчета имели функцию «минус подсчета», поэтому после ошибочного добавления их можно удалить

Question

Я новичок ie, который использовал ответ с меткой подсчета, чтобы сделать веб-приложение коронирусного вируса python для моих детей, чтобы делать домашнюю работу по математике, но я действительно хочу, чтобы эта опция убирала метки для детей, когда они over click.

Оригинальный пост JQuery вызов - рисовать метки на событии клика стал для меня большим откровением, и я смог использовать его для десятков и десятков , но я еще не в состоянии переделать его за минус функциональность. Для этого я хочу добавить кнопку, которая вызывает удаление бюллетеней в том же порядке, в котором они были добавлены.

Я действительно надеялся, что mVChr был рядом, чтобы дать мне несколько советов, как автор или кто-то другой, кто в равной степени способен.

Текущий веб-интерфейс

Любая помощь в этой изоляции, но время обучения будет приветствоваться.

Answer 1

Вот один пример. Есть и другие возможные решения.

Рабочий пример: https://jsfiddle.net/Twisty/xpy6dufv/37/

HTML

<div id="tally"></div>
<div class="remove btn">-</div>

CSS

#tally {
  cursor: pointer;
  width: 100%;
  height: auto;
}

.btn {
  font-size: 24px;
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 6px;
  padding-top: -3px;
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  margin: 3px;
}

.btn:hover {
  background-color: #ccc;
}

JavaScript

$.fn.tallier = function(action) {
  var $this = this,
    bgUrl = 'http://i.stack.imgur.com/96hvp.png',
    bgHeight = 125,
    bgVals = [
      [45, 25],
      [65, -35],
      [85, -115],
      [105, -215],
      [140, -360]
    ];

  if ($this.data("count") == undefined) {
    $this.data("count", 0);
  }

  var add = function() {
    $this.data("count", $this.data("count") + 1);
    var count = $this.data("count");
    if (count % 5 == 1) {
      var $newTally = $('<div>').addClass('tally');
      $newTally.css({
        background: 'url("' + bgUrl + '") ' +
          bgVals[0][1] + 'px 0 no-repeat transparent',
        float: 'left',
        width: bgVals[0][0] + 'px',
        height: bgHeight + 'px'
      });
      $this.append($newTally);
    }
    var $lastTally = $this.find('.tally:last'),
      i = count % 5 - 1;
    i = i < 0 ? 4 : i;
    $lastTally.css({
      'background-position': bgVals[i][1] + 'px 0',
      width: bgVals[i][0] + 'px'
    });
  };

  var sub = function() {
    if ($this.data("count") == 1) {
      return false;
    }
    $this.data("count", $this.data("count") - 1);
    var count = $this.data("count");
    var $lastTally = $this.find('.tally:last');
    if (count % 5 == 0) {
      $lastTally.remove();
    } else {
      var i = count % 5 - 1;
      i = i < 0 ? 4 : i;
      $lastTally.css({
        'background-position': bgVals[i][1] + 'px 0',
        width: bgVals[i][0] + 'px'
      });
    }
  };
  if (action == "add") {
    add();
  } else {
    sub();
  }
}

var $t = $('#tally');

$t.tallier("add");

$t.click(function() {
  $t.tallier("add");
});

$(".remove").click(function() {
  $t.tallier("sub");
});

Исходный скрипт был разработан для подсчета, каждый щелчок увеличивал подсчет на 1. При этом используется тот же алгоритм, но добавляет функцию вычитания.