javascript - 请问有人可以批评这张邮票卡密码笔吗?
问题描述
我一直在寻找邮票卡的工作示例,以用作我自己项目的起点。
我找到了这个代码笔:
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)
这只是为了更新积分计数器,如果突出显示的邮票数量发生变化,这是必要的。
编辑:加载时添加邮票
推荐阅读
- python - 如何将行子集传递给自定义函数并返回列表?
- ios - 如何使用 ARKit 计算点 2 到点 3 和点 3 到 4 的距离等等?
- typescript - 在 Typescript 中,为什么 JSX.IntrinsicElements 不像文档描述的那样工作?
- java - 如何在android中检查txt文件中的一行是否以“h”开头?
- android - 如何在多个活动上实现 admob 横幅
- c# - 使用 AForge 裁剪时特定计算机上的奇怪行为
- php - 尝试在重置用户密码时获取非对象的属性
- javascript - 将数据从 web 服务加载到表中,然后到数据库
- php - 在PHP中合并两个具有公共字段值的json文件
- php - 不需要的前缀被添加到我的查询列名中