图片元素实现评价等级

2019-04-15 18:36发布生成海报

站内文章 / PIC单片机

12944 0

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部分


    思维能力
    
        {for start="0" end="$data.think"}
        
        {/for}
        {for start="0" end="5-$i" name='k'}
        
        {/for}
        
    


    创新能力
    
        {for start="0" end="$data.innovate"}
        
        {/for}
        {for start="0" end="5-$i" name='k'}
        
        {/for}

解释

循环后端数据，显示当前星级，data-name作为图片本身位置，data-id与隐藏域同名（后来发现不需要起名，直接定位到同级唯一的input就行），data-pic作为选中时显示的图片名参数的一个标识一个5个星级第一个循环显示评价的星级，第二个循环补足5个点击图片时，获取图片所代表的的星级，把全部图片都变为灰 {MOD}，然后循环选中数字，把需要改变的图片变换路径

图片元素实现评价等级

JQ部分

html部分

解释

Ta的文章更多 >>

热门文章

图片元素实现评价等级

JQ部分

html部分

解释

Ta的文章 更多 >>

热门文章

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

Ta的文章更多 >>