表情评分优化问题

Question

这个评分是点击哪个表情那么所有的表情都变成该表情

我自己写了的jq 效果可以实现 但是感觉太低级了，希望大家可以告诉我的代码什么地方可以优化下,谢谢

html部分

<li><div class="evaluation-info">
<dl class="goods-info">
<dd class="goods-rate">评分：

<span class="star-level">
  <i class="expression_03" val="1"></i>
  <i class="expression_03" val="2"></i>
  <i class="expression_03" val="3"></i>
  <i class="expression_04_f" val="4"></i>
  <i class="expression_05_f" val="5"></i>
</span>
<input type="hidden" name="goods[1668][score]" value="3"></dd>
<span class="evaluation-tips">感觉一般，还需要改进哦</span></dl>
</div>
        <div class="evaluation-inp-block">
        <textarea type="text" class="textarea" name="goods[1668][comment]" placeholder="告诉小T需要改进的的地方吧，我们一定努力做好"></textarea>
            
</div>

</li>

jquery 部分

$(".star-level").on('click','i',function() {

        var a = $(this).attr('val');                    
            if(a==1){
                 $(this).parent('.star-level').next().val(a);
                 $(this).parents('.goods-info').find('.evaluation-tips').text('本宝宝很不满意，生气');
                 $(this).parents('li').find('textarea').attr('placeholder',"消消气，跟小T说说遇到了啥问题，我们一定帮你解决");
                 $(this).parent('.star-level').html();
                   i =  '<i class="expression_01" val="1"></i>'+
                        '<i class="expression_02_f" val="2"></i>'+
                        '<i class="expression_03_f" val="3"></i>'+
                        '<i class="expression_04_f" val="4"></i>'+
                        '<i class="expression_05_f" val="5"></i>';
                   $(this).parent('.star-level').html(i);                       
            }else if(a==2){
                   $(this).parent('.star-level').next().val(a);
                   $(this).parents('.goods-info').find('.evaluation-tips').text('哎，感觉有些失望呢');
                   $(this).parents('li').find('textarea').attr('placeholder',"遇到了啥问题，跟小T说说吧，我们一定帮你解决");
                   $(this).parent('.star-level').html();
                   i =  '<i class="expression_02" val="1"></i>'+
                        '<i class="expression_02" val="2"></i>'+
                        '<i class="expression_03_f" val="3"></i>'+
                        '<i class="expression_04_f" val="4"></i>'+
                        '<i class="expression_05_f" val="5"></i>';
                   $(this).parent('.star-level').html(i);
                   
            }else if(a==3){
                   $(this).parent('.star-level').next().val(a);
                   $(this).parents('.goods-info').find('.evaluation-tips').text('感觉一般，还需要改进哦');
                   $(this).parents('li').find('textarea').attr('placeholder',"告诉小T需要改进的的地方吧，我们一定努力做好");
                   $(this).parent('.star-level').html();
                   i =  '<i class="expression_03" val="1"></i>'+
                        '<i class="expression_03" val="2"></i>'+
                        '<i class="expression_03" val="3"></i>'+
                        '<i class="expression_04_f" val="4"></i>'+
                        '<i class="expression_05_f" val="5"></i>';
                   $(this).parent('.star-level').html(i);                                              
            }else if(a==4){
                   $(this).parent('.star-level').next().val(a);
                   $(this).parents('.goods-info').find('.evaluation-tips').text('还不错本宝宝喜欢');               
                   $(this).parents('li').find('textarea').attr('placeholder',"快告诉小伙伴宝贝有多好吧，大家都等着你分享经验呢");
                   $(this).parent('.star-level').html();
                   i =  '<i class="expression_04" val="1"></i>'+
                        '<i class="expression_04" val="2"></i>'+
                        '<i class="expression_04" val="3"></i>'+
                        '<i class="expression_04" val="4"></i>'+
                        '<i class="expression_05_f" val="5"></i>';
                   $(this).parent('.star-level').html(i);                       
            }else if(a=5){
                   $(this).parent('.star-level').next().val(a);
                   $(this).parents('.goods-info').find('.evaluation-tips').text('超赞，本宝宝特别喜欢');
                   $(this).parents('li').find('textarea').attr('placeholder',"说说说你的使用感受吧，给其他小伙伴一点帮助～");
                   $(this).parent('.star-level').html();
                   i =  '<i class="expression_05" val="1"></i>'+
                        '<i class="expression_05" val="2"></i>'+
                        '<i class="expression_05" val="3"></i>'+
                        '<i class="expression_05" val="4"></i>'+
                        '<i class="expression_05" val="5"></i>';
                   $(this).parent('.star-level').html(i);
            }
        
    });

Answer 1

代码优化部分

1. 变量缓存

2. switch代替if／else

3. i标签那个部分可以写个函数来生成
   具体优化代码如下：

function getI(idx) {
    var html = '';
    for (var i = 0; i < 5; i ++) {
        html += '<i class="expression_0' + ((idx - 1) <= i ? idx : ((i + 1) + '_f')) + '" val="' + (i + 1) + '"></i>'
    }
    return html;
}
function handleClick() {
    var $this = $(this);
    var $starLevel = $this.parent('.star-level');
    var $starLevelNext = $starLevel.next();
    var $text = $this.parents('.goods-info').find('.evaluation-tips');
    var $textarea = $this.parents('li').find('textarea');
    var val = $this.attr('val');
    var text = '';
    var palceholder = '';
    switch (val) {
        case 1: {
            text = '本宝宝很不满意，生气';
            placeholder = '消消气，跟小T说说遇到了啥问题，我们一定帮你解决';
            break;
        }
        case 2: {
            text = '哎，感觉有些失望呢';
            placeholder = '遇到了啥问题，跟小T说说吧，我们一定帮你解决';
            break;
        }
        case 3: {
            text = '感觉一般，还需要改进哦';
            placeholder = '告诉小T需要改进的的地方吧，我们一定努力做好';
            break;
        }
        case 4: {
            text = '还不错本宝宝喜欢';
            placeholder = '快告诉小伙伴宝贝有多好吧，大家都等着你分享经验呢';
            break;
        }
        case 5: {
            text = '超赞，本宝宝特别喜欢';
            placeholder = '说说说你的使用感受吧，给其他小伙伴一点帮助～';
            break;
        }
        default:
            break;
    }
    $starLevelNext.val(val);
    $text.text(text);
    $textarea.attr('placeholder', placeholder);
    $starLevel.html(getI(val));
}
$(".star-level").on('click','i', handleClick);