javaScript 星级评价效果

最新推荐文章于 2023-04-03 22:00:33 发布

原创最新推荐文章于 2023-04-03 22:00:33 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript 星级评价

javascript 插件专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript和HTML的hidden input元素来创建一个星级评价系统。在实现过程中遇到了问题，即在清除li的类时，只对最后一组有效，作者对此现象进行了猜测并寻求解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用input hidden实现

以后尽量多谢注释以便理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星级评价</title>
    <style>
        .spj:after{ content: '';display: block;clear: both;height: 0;visibility: hidden;}
        .clearfix{ zoom: 1;}
        .spj ul li,.spj ul{ float:left; padding: 0; margin: 0;}
        .spj ul li{ list-style: none; font-size: 26px; color:#999; padding:0 5px; cursor: pointer;user-select: none; font-weight:bold;}
        .spj ul li.col{ color: #ee0;}
        .spj span{ line-height:  30px; margin-left: 15px;}
    </style>

</head>
<body>
    <input type="hidden" value="3" title="10">
    <input type="hidden" value="">
    <script>
        var input=document.querySelectorAll('input[type="hidden"]');
        input.forEach(function(_input){
            var _inputTitle=_input.getAttribute('title')|| 5;
            var div=document.createElement('div');
            //清除浮动
            div.className='spj clearfix';
            _input.parentNode.insertBefore(div,_input);
            var ul=document.createElement('ul');
            div.appendChild(ul);
            var number= ["零","一","二","三","四","五","六","七","八","九","十"];
            //动态添加五角星
            for (var i =1; i <=_inputTitle; i++){
                var li=document.createElement('li');
                ul.appendChild(li);
                li.innerHTML='★';
                li.title=number[i]+'星好评';
            }
            var span=document.createElement('span');
            div.appendChild(span);
            var LI=ul.querySelectorAll('li');
            //默认有value改变颜色
            for (var j = 0; j <= _input.value; j++) {
                //当前一个都没有被点击时不用循环
                if(_input.value=="")break;
                LI[j].className = 'col';
            }
            span.innerHTML=_input.value?""+number[_input.value]+"星好评":"";
            LI.forEach(function(_li,a){
                _li.onclick=function(){
                    span.innerHTML=_li.title;
                    //当前点击选中的星的下标
                    _input.value=a;
                }
                _li.onmouseover=function(){
                    //清除选中的星的颜色
                    for (var i = 0; i < LI.length; i++) {
                        LI[i].className = '';
                    }
                    //当前移上的星和他前面的都变颜色
                    for (var j= 0; j <= a; j++ ){
                        LI[j].className='col';
                    }
                }
                _li.onmouseout=function(){
                    //清除没有点击选中的
                    for (var i = 0; i < LI.length; i++) {
                        LI[i].className = '';
                    }
                    //鼠标移开后变回选中的星
                    for (var j = 0; j <= _input.value; j++) {
                        //当前一个都没有被点击时不用循环
                        if(_input.value=="")break;
                        LI[j].className = 'col';
                    }
                }
            })
        })
    </script>
</body>

<html>