Jquery 我希望理货标记有'；减去计数'；功能，以便在错误添加后可以删除它们

我是一个新手，使用tally mark答案为我的孩子制作了一个corona病毒python web应用程序，让他们做数学作业，但我真的希望孩子们点击鼠标时可以删除tally mark

最初的帖子让我大开眼界，我可以扩展到1和10，但我还不能重做负计数功能。我想做的是添加一个按钮，该按钮按照添加计数的相同顺序调用删除计数

我真的希望有人能给我一些指导，作为作者或其他同样能干的人

---

在这些孤立但学习的时间里，任何帮助都将不胜感激。

这里是一个例子。还有其他可能的解决办法

工作示例：

HTML

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

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");
});

$.fn.tallier=函数（操作）{
var$this=这个，
bgUrl=http://i.stack.imgur.com/96hvp.png',
bg高度=125，
bgVals=[
[45, 25],
[65, -35],
[85, -115],
[105, -215],
[140, -360]
];
if（$this.data（“count”）==未定义）{
$this.data（“计数”，0）；
}
var add=函数（）{
$this.data（“计数”），$this.data（“计数”）+1）；
var count=$this.data（“count”）；
如果（计数%5==1）{
var$newTally=$（''）.addClass（'tally'）；
$newTally.css({
背景：“url”（“+bgUrl+”）”+
bgVals[0][1]+“px 0无重复透明”，
浮动：'左'，
宽度：bgVals[0][0]+'px'，
高度：bgHeight+‘px’
});
$this.append（$newTally）；
}
var$lastTally=$this.find（'.tally:last'），
i=计数%5-1；
i=i<0？4:i；
$lastTally.css({
“背景位置”：bgVals[i][1]+“px 0”，
宽度：bgVals[i][0]+'px'
});
};
var sub=函数（）{
if（$this.data（“count”）==1）{
返回false；
}
$this.data（“计数”），$this.data（“计数”）-1）；
var count=$this.data（“count”）；
var$lastTally=$this.find（'.tally:last'）；
如果（计数%5==0）{
$lastTally.remove（）；
}否则{
var i=计数%5-1；
i=i<0？4:i；
$lastTally.css({
“背景位置”：bgVals[i][1]+“px 0”，
宽度：bgVals[i][0]+'px'
});
}
};
如果（操作==“添加”）{
添加（）；
}否则{
sub（）；
}
}
var$t=$（'理货'）；
$t.tallier（“添加”）；
$t.click（函数（）{
$t.tallier（“添加”）；
});
$（“.remove”）。单击（函数（）{
$t.tallier（“子”）；
});

---

最初的脚本被设计成一个计数，每次点击都会使计数增加1。这使用了相同的算法，但添加了一个减法函数。

欢迎使用堆栈溢出。请提供一个最小的、可复制的示例：我不知道如何提供一个示例，除了我引用的原版代码，我正在使用原样。您提供的链接没有告诉我们您正在使用的代码。加上它已经8岁了。你在用什么图书馆？请阅读帮助文章，它讨论了如何提供适当的例子，以便其他人可以帮助你。老实说，我不太明白这一点。您提供的链接没有告诉我们您使用的代码。加上它已经8岁了。该链接提供了我复制和使用的所有源代码，因此不确定我还可以在这里添加什么，因为我不太了解它。你在用什么图书馆？不知道这意味着什么。对于知识渊博的程序员来说，源代码的链接应该能回答这个问题。老实说，我正在尽我最大的努力，但似乎标准对我来说太高了，但我真的需要帮助为我的孩子做事情和学习。感谢Twisty，它非常有效，我能够将实例集成到我的网页中。我的一个问题是，在页面上多次运行此命令是否有限制？任何变量都会混淆吗？@bigtoreag它们不应该混淆，因为每个变量都包含在自己的函数中。非常感谢您的澄清。我受到了激励，为自己建立了一个JSFIDLE帐户，并将最终的工作解决方案放在了网上。

$.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");
});