Question

我是一名初学者，致力于个人项目，我正在尝试制作一个叫做“板球”的飞镖游戏的计数系统。

请访问下面的代码：

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元素）。

Answer 2

您需要将转弯功能添加到您的应用中，以便您可以区分当前的回合。

但是也有一个没有它的解决方案：

$(document).ready(function(){
 $("h1").click(function(){
  var mark = $("<h1 class='mark'>I</h1>");
  var current = ($(this).parents(".player.one").length > 0)?".one":".two";
  if ($(current +" .mark").length >= 3) return;
  $(this).closest('.count').append(mark); 
 });
});

在代码中，我添加了用于检测用户点击的的功能。如果用户点击了玩家 <div class="player one">，那么它会检查玩家一得分的分数，并拒绝其为玩家一次获得分数的能力已经得分三次。玩家二也是如此。

当你刚开始这个项目时，我建议你禁用其他玩家div，直到第一个玩家完成转弯。我推荐的最简单方法是使用pointer-events:none CSS。这可以在上面的点击列表器中实现。

Answer 3

怎么样？

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

首先，$('h1').click()：这对我来说感觉不对/太通用了。在页面的某处引入另一个标题并忘记附加了点击监听器是多么容易。

添加监听器类更具体，因为您可以在不在其他任何地方使用它的方式命名该类。唯一的区别是，您现在可以单击整行，而不仅仅是数字。
var mark = $("<h1 class='mark'>I</h1>");：不需要自己将它包装到jquery元素中，特别是如果你不知道它是否会被添加。您可以将模板传递给.append()
if(...) return; //else-code：我知道这个早期的方法，并且避免将大量代码嵌套到else块中非常有用，但在这里我们讨论的是单行。 if..then感觉（如阅读句子）比if..abort ... otherwise更流畅。

这不是对你的apprach的批评。由于您的代码有效，而且只有几行。这反映了我如何设置它，以及为什么。

jQuery - 设置附加数限制

3 个答案: