JSFiddle - React, Tailwind, and code Playground

by brian20181109

HTML

<html>
<head>
<style>
ul{
            list-style: none;
            width: 150px;
            height: 29px;
            
            margin: 30px;
        }
        li{
            float: left;
            width: 30px;
            height: 25px;
            /*
            background: url(img/star.png);
            */
        }
        /*
        .active{
            background-position-y: -20px;
        }
        */

  .active {
    color: red;
  }
</style>
</head>
<body>
<div>
        <ul>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
    </ul>
    </div>
    <p></p>
<script type = 'text/javascript'>
var aLi = document.getElementsByTagName('li');
        var oIinfo = document.getElementsByTagName('p')[0];

        var current = -1;

        for(i=0;i<aLi.length;i++){
        // 加入以下4行
        aLi[i].onmousedown = function(){
        current=this.index;
        aLi[i].className = 'active';
        }
        
            aLi[i].index = i;

            aLi[i].onmouseover = function(){
                for(j=0;j<aLi.length;j++){
                    if(j<=this.index){
                        aLi[j].className = 'active';
                    }else{
                        aLi[j].className = null;
                    }
                }
            
                
            }

            aLi[i].onmouseout = function(){      
                for(j=0;j<aLi.length;j++){    
                    if(j<= current){              //看不懂的地方
                        aLi[j].className = 'active';
                    }else{
                    aLi[j].className = null; 
                    }            
                }
            }

        }
</script>
</body>
</html>