百度評分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>圖片文件在的我文件裏面，麻煩去找一下。
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。