图片元素实现评价等级
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个
点击图片时,获取图片所代表的的星级,把全部图片都变为灰色,然后循环选中数字,把需要改变的图片变换路径