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>

注意：您会注意到我在每个功能之后复制并粘贴此行：$('#points').text($(".points-on").length)

这仅是更新点数计数器，如果突出显示的印章数量发生变化，这是必需的。

编辑：加载时添加了图章

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

1 个答案: