百度评分onclick与onmouseout冲突解决（带传参）

时间 2019-12-12
标签百度评分 onclick onmouseout 冲突解决繁體版
原文原文链接
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0}
        #wrapper{margin: 50px auto}
    </style>
    <script>
        window.onload = function(){
            fn('wrapper');
            fn('wrapper1');
            fn('wrapper')
        }
        function fn(id){
            var oDiv = document.getElementById(id)
            var oStar = oDiv.getElementsByTagName('strong')[0];
            var aImg = oStar.getElementsByTagName('img');
            var oText = oDiv.getElementsByTagName('span')[1];
            var arrText = ['不好','凑合','通常般','不错','很好'];
            var oClick = true;//申明一个布尔值，判断鼠标移除与点击以后的冲突，点击效果以后会连带鼠标移除，这里有冲突的

            for(var i=0;i<aImg.length;i++){
                aImg[i].index = i;
                aImg[i].onmouseover = function() { //鼠标移入函数
                    oClick = true;
                    oText.innerHTML = arrText[this.index];//后面文字
                    if (this.index < 2) {//鼠标到达位置小于2
                        for (var m= 0; m <= this.index; m++) {
                            aImg[m].src = 'img/nsg.gif';//变为黑灰色
                        }
                    } else if (1<this.index < 5) {//大于1小于5
                        for (var m= 0; m <= this.index; m++) {
                            aImg[m].src = 'img/sth.gif';//变为黑色
                        }
                    }
                    this.onmouseout = function(){//鼠标移除效果
                        if(oClick){
                            for(var i=0;i<aImg.length;i++){
                                aImg[i].src = 'img/nst.gif'//换换默认星星
                            }
                            oText.innerHTML ='点击进行评分！'
                        }
                    }
                }

                aImg[i].onclick = function(){//鼠标点击效果
                    oClick = false;
                    oText.innerHTML = arrText[this.index];//后面文字
                    if(this.index<2){
                        for(var i=0;i<= this.index;i++){
                            aImg[i].src = 'img/nsg.gif';
                        }
                    }else if(1<this.index<5){
                        for(var i=0;i<=this.index;i++){
                            aImg[i].src = 'img/st.gif';
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <div id="wrapper">
        <span>请评分：</span>
        <strong id="star">
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
        </strong>
        <span id="test">点击进行评分！</span>
    </div>
    <div id="wrapper1">
        <span>请评分：</span>
        <strong id="star1">
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
        </strong>
        <span id="test1">点击进行评分！</span>
    </div>
    <div id="wrapper2">
        <span>请评分：</span>
        <strong id="star2">
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
        </strong>
        <span id="test2">点击进行评分！</span>
    </div>
</body>
</html>图片文件在的我文件里面，麻烦去找一下。