图片元素实现评价等级

JQ部分

$(document).ready(function() {
        $(".showadd").click(function () {
            var num = $(this).attr('data-name');
            var name = $(this).attr('data-id');
            var pic = $(this).attr('data-pic');
            $(this).parent().children(".showadd").attr('src','__SHOW__0.png');
            $(this).parent().children($("input[name="+name+"]")).val(num);
            for (var i = 1;i <= num; i++){
                $("#"+name+i).attr('src','__SHOW__'+pic+'.png')
            }
        });
    });

html部分

<div class="form-group">
    <label class="control-label col-lg-2">思维能力</label>
    <div class="col-lg-10">
        {for start="0" end="$data.think"}
        <img src="__SHOW__1.png" id="think{$i+1}" data-name="{$i+1}" class="showadd" data-id="think" data-pic="1" style="width:35px;height:35px;border-radius: 25px">
        {/for}
        {for start="0" end="5-$i" name='k'}
        <img src="__SHOW__0.png" id="think{$i+$k+1}" data-name="{$i+$k+1}" class="showadd" data-id="think" data-pic="1" style="width:35px;height:35px;border-radius: 25px">
        {/for}
        <input type="hidden" name="think" value="{$data.think}">
    </div>
</div>
<div class="form-group">
    <label class="control-label col-lg-2">创新能力</label>
    <div class="col-lg-10">
        {for start="0" end="$data.innovate"}
        <img src="__SHOW__2.png" id="innovate{$i+1}" data-name="{$i+1}" class="showadd" data-id="innovate" data-pic="2" style="width:35px;height:35px;border-radius: 25px">
        {/for}
        {for start="0" end="5-$i" name='k'}
        <img src="__SHOW__0.png" id="innovate{$i+$k+1}" data-name="{$i+$k+1}" class="showadd" data-id="innovate" data-pic="2" style="width:35px;height:35px;border-radius: 25px">
        {/for}
        <input type="hidden" name="innovate" value="{$data.innovate}">
    </div>
</div>

解释

循环后端数据，显示当前星级，data-name作为图片本身位置，data-id与隐藏域同名（后来发现不需要起名，直接定位到同级唯一的input就行），data-pic作为选中时显示的图片名参数的一个标识

一个5个星级

第一个循环显示评价的星级，第二个循环补足5个

点击图片时，获取图片所代表的的星级，把全部图片都变为灰色，然后循环选中数字，把需要改变的图片变换路径