javascript - 请问有人可以批评这个邮票卡代码笔吗？

Question

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

我找到了这个代码笔:

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 经验很少。

谁能帮我分析一下这里发生了什么，以及我如何才能完成工作，以便每次按下按钮时都会填满一个圆圈？

谢谢。

Answer 1

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>

编辑:添加计数器

编辑:为按钮添加了功能

编辑:添加了重置功能。<​​/p>

NOTE: You'll notice I copy and paste this line after every function: $('#points').text($(".points-on").length)

This is only to update the points counter, which is necessary if the amount of stamps highlighted changes.

编辑:加载时添加了标记