移动端----------------评价之星级好评

最近无聊做了一个小评价，就是星级好评，就是我这里是通过改变img中src的属性，就可以实现星级评价的功能，话不多说，下来是代码：

HTML代码

<div class="xing" style="text-align: center;margin-bottom: 0.5rem;border-bottom: 1px dotted #eee">
    <img src="./img/xing1.png" alt="" style="width:0.54rem;height:0.54rem" onmousedown="change('1')">
    <img src="./img/xing1.png" alt="" style="width:0.54rem;height:0.54rem" onmousedown="change('2')">
    <img src="./img/xing1.png" alt="" style="width:0.54rem;height:0.54rem" onmousedown="change('3')">
    <img src="./img/xing1.png" alt="" style="width:0.54rem;height:0.54rem" onmousedown="change('4')">
    <img src="./img/xing1.png" alt="" style="width:0.54rem;height:0.54rem" onmousedown="change('5')">
</div>

js代码

function change(t) {
    $(".xing img").attr("src", "./img/xing1.png");
    for (var s = 0; s < t; s++) {
        $('.xing img').eq(s).attr("src", "./img/xing.png");
    }
}

• js执行的时候，要首先引入jquery，才能正常使用

效果图如下

-
切图时，要注意切两个，一个是带有颜色的，一个是不带颜色的，两个图片是替换的，

• 你也可以根据自己的实际情况更改你所需要的图片