问题描述

菜鸟求js大神帮忙!!为什么我这段js代码只有第一个元素绑定了事件

<script>
        window.onload=function(){
            var oParent=document.getElementById("aa");
            var boxs=oParent.getElementsByClassName("box");
            for(var i=0;i<boxs.length;i++){
                var imgs=boxs[i].getElementsByClassName("img");
                    for(var p=0;p<imgs.length;p++){
                    imgs[p].onmouseover=function(){
                        show();
                    }
                    imgs[p].onmouseout=function(){
                        unshow();
                    }
                }
            }
        }
        function show(){
            var txts=document.getElementsByClassName("txt");
                for(var j=0;j<txts.length;j++){
                    if(j==0){
                        txt[j].style.width=202+"px";
                        txt[j].style.height=202+"px";
                        txt[j].style.display="block";
                        txt[j].style.left=260+"px";
                    }else{
                        if(j%2!=0){
                            if(j<3){
                                txt[j].width=102+"px";
                                txt[j].height=102+"px";
                                txt[j].style.display="block";
                                txt[j].style.left=360+"px";
                            }else{
                                txt[j].width=102+"px";
                                txt[j].height=102+"px";
                                txt[j].style.display="block";
                                txt[j].style.left=360+"px";
                                txt[j].style.top=100+"px";
                            }

                        }else{
                            if(j<4){
                                txt[j].width=102+"px";
                                txt[j].height=102+"px";
                                txt[j].style.display="block";
                                txt[j].style.left=460+"px";
                            }else{//4
                                txt[j].width=102+"px";
                                txt[j].height=102+"px";
                                txt[j].style.display="block";
                                txt[j].style.left=460+"px";
                                txt[j].style.top=100+"px";
                            }
                        }
                        }
                }
        }
        function unshow(){
            var txts=document.getElementsByClassName("txt");
                for(var j=0;j<txts.length;j++){
                    txts[j].style.display="none";
                }
        }
        </script>

解决方案

__因为for先执行出来了p的值，然后下面的事件直接用到p的值，你需要做的事情是在每次onmouseover事件的时候每次执行的都是循环之后的值
你需要的是每次在做事件的时候把当前的index值存下，于是在你触发滑动事件的时候执行的是你当前存下的下标的那个元素对象了

解决方案二：

JS实现对DOM元素事件的绑定
JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
js 事件绑定的方法

解决方案三：

className用在html5.个个浏览器好像还不通用吧最好别用

解决方案四：

试试其他的浏览器，看能不能用，