javascript - jQuery - 设置附加数量限制

Question

我是一名初学者，正在从事一个个人项目，我正在尝试为名为“Cricket”的飞镖游戏制作一个计数系统。

请访问下面我的代码:

https://codepen.io/benszucs/pen/ZXdGxe

jquery:

$(document).ready(function() {
  $('h1').click(function(){
    var mark = $("<h1 class='mark'>I</h1>");
    if ($(".mark").length >= 3) return;
    $(this).closest('.count').append(mark);
  });
});

对于每个数字，玩家最多可以得分 3 分(线)。我设法对可以附加的行数设置限制，但这适用于整个应用程序。

我想要的是能够为每个玩家的每个数字(15 -> Bull)最多标记三行。

我是否缺少一个简单的解决方案，或者我是否以错误的方式处理问题？

谢谢

Answer 1

您正在使用 mark 类对元素进行计数。所以当你达到3个元素时，无论是哪个分数，你都无法再添加分数。

解决此问题的方法是从您单击的元素中计算 mark 元素，例如:

if ($(this).parent().children().length >= 4) return;

在此代码中，您将计算您单击的分数元素的父元素中的子元素(h1 元素)的数量。