甜甜的泥土

星星评分

点击星星给我评分:

                    
!function(){
    var demo = document.getElementById('demo');
    var stars = demo.getElementsByTagName('li');
    var result = document.getElementById('result');
    var tips = document.getElementById('tips');
    var score = 0;
    var length = stars.length;
    var aMsg = [
            "很不满意| 与卖家描述的严重不符,非常不满",
            "不满意| 与卖家描述的不符,不满意",
            "一般| 没有卖家描述的那么好",
            "满意| 与卖家描述的基本一致,还是挺满意的",
            "非常满意| 与卖家描述的完全一致,非常满意"];

    var fnStar = function(index){
        var j = index || score;
        for (var i = 0; i < length; i++) {
            stars[i].className = i < j ? 'on' : "";
        }
    }

    for (var i = 0; i < length; i++) {
        stars[i].dataset.index = i;

        stars[i].onmouseenter = function(){
            var index = parseInt(this.dataset.index);

            fnStar( index + 1);
            tips.style.display = 'block';
            tips.style.left = 50 + 24*index + 'px';
            tips.innerHTML = aMsg[index];
        }

        stars[i].onmouseout = function(){
            fnStar();
            tips.style.display = 'none';
        }

        stars[i].onclick = function(){
            var index = parseInt(this.dataset.index);

            score = index + 1;
            result.innerHTML =index + 1 +'分' + aMsg[index];
        }
    }

    
}();