讲 jQuery,用了个例子,星星评价。我 f4,真的是临时想到做这个的。
毕竟 jQuery 太熟悉了,从 1.2 开始用到现在的 3.x。而且这个案例也很简单,如图所示。
主要功能就是点击星星,获取图片的索引,基于索引得到对应的分数。
这里做 5 星,也可以做 10 星,也可以做包含半星的评价。思路都差不多。
素材准备
两个大小一样的图片。
HTML
<!-- 评分 -->
<div class="fenshu">
<span id="fs">0</span>
分
</div>
<!-- 评分 end -->
<!-- 星星 -->
<div class="stars">
<img class="star" src="images/1.png" />
<img class="star" src="images/1.png" />
<img class="star" src="images/1.png" />
<img class="star" src="images/1.png" />
<img class="star" src="images/1.png" />
</div>
<!-- 星星 end -->
<input type="hidden" value="0" id="starVal"><!-- 隐藏域,便于表单数据存储和提交 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/star.js"></script>
不要忘了在所有 JS 文件的最开始引入 jQuery 文件哦~
CSS
.stars{
width: 350px; /* 5张图,每张70px宽 */
}
.stars img{
width: 50px;
height: 50px;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.fenshu{
font-size: 30px;
}
.fenshu span{
font-size: 50px;
color: #f30;
font-weight: bold;
}
JavaScript
let starsFun = function(){
let caise = "images/2.png"; // 彩色星星
let huise = "images/1.png"; // 灰色星星
let fs = $("#fs");
let star = $(".star");
let starVal = $("#starVal");
star.on("click",function(){
let $this = $(this);
// 获取索引
let index = $this.index();
// 更改分数
fs.html( index + 1 );
starVal.val( index+1 );
// 当前星星以及前面所有星星变成彩色。这里用了 jQuery 的链式操作。
$this.attr({
src: caise
}).prevAll(".star").attr({
src: caise
});
// 后面所有的星星变成灰色
$this.nextAll(".star").attr({
src: huise
});
});
};
$(function(){
starsFun();
});