javascript - 请有人批评此邮票卡密码笔吗？

我一直在高低寻找邮票卡的工作示例，以用作我自己的项目的起点。

我找到了这个Codepen：

Codepen

var i = 0

$(".points").click(function() {
  if (this.hasClass('points points-on')) {
    this.addClass("points-on");
    console.log("cje");
  } else {
    this.addClass("points-on");
    i = i + 1;
    console.log(i);
  }
});

不幸的是，该按钮似乎无法正常工作，并且我对JavaScript的了解很少。

有人可以帮助我剖析这里发生的事情以及如何完成工作，以便每次按下按钮时都填满一个圆圈吗？

谢谢。

最佳答案

css和jquery都写得很奇怪。下面，我重写了它之前尝试做的基本要点-单击时选择图章：

var storedStamps = +prompt()
var stamps = $('.points')
for (var i = 0; i < storedStamps; i++) {
  stamps.eq(i).addClass('points-on')
}

var i = 0

$(".points").click(function() {
  $(this).toggleClass('points-on')
  $('#points').text($(".points-on").length)
});

function addNextStamp() {
  var points = $(".points")
  for (var i in points) {
    if (!points.eq(i).hasClass('points-on')) {
      points.eq(i).addClass('points-on')
      $('#points').text($(".points-on").length)
      break;
    }
  }
}

function reset() {
  $('.points-on').removeClass('points-on')
  $('#points').text($(".points-on").length)
}

body {
  background-color: #000000;
}

.navbar {
  border-radius: 0px;
}

ul {
  list-style: none;
  padding: 0;
}

.points {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #999;
  margin: 5px;
  background-color: #000;
}

.points-on {
  background-color: #CFFCFF;
}

li {
  display: inline-block;
}

.container {
  width: 80%;
  max-width: 250px;
}

.points {
  border-color: #AAEFDF;
}

.points:active {
  background-color: #AAEFDF;
  border-color: #CFFCFF;
}

<div class="container">
  <div class="row">
    <ul class="score">
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
      <li class='points'></li>
    </ul>
  </div>
  <div>
    <button type="button" id="addpoints" class="btn btn-default btn-block" onclick="addNextStamp()">ADD POINTS</button>
    <button type="button" id="addpoints" class="btn btn-default btn-block" onclick="reset()">RESET</button>
    <span style="color: white;"><span id="points">0</span> points</span>
  </div>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

编辑：添加计数器

编辑：为按钮添加了功能

编辑：添加了重置功能。


  注意：您会注意到我在每个功能之后复制并粘贴此行：$('#points').text($(".points-on").length)
  
  这仅用于更新点数计数器，如果突出显示的印章数量发生变化，则这是必需的。


编辑：加载添加邮票

关于javascript - 请有人批评此邮票卡密码笔吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56150516/