请教JS的遍历数据及绑定事件问题？

Question

想实现为每一条遍历出来的数据，绑定鼠标触发事件。实现鼠标移动后，弹出div层显示详细资料,鼠标移开后 div 层自动隐藏。但不知为何，我的代码只有第一条数据能弹出正确的层。移动到第二条数据及后面的数据，也是弹出第一条数据的层。请指教，谢谢！！ window.onload = function () {
            var allDiv = document.getElementsByTagName("div");
            for (var i = 0; i < allDiv.length; i++) {
                if (allDiv[i].thisDiv == "thisDiv") {
                    allDiv[i].onmouseover = showDiv; 
                    allDiv[i].onmouseout = hideD; 
                }
            }
        }        function showDiv() {
            document.getElementById("hideDiv").style.display = "block";
        }
        function hideD() {
            document.getElementById("hideDiv").style.display = "none";
        }
@foreach (var item in Model) {
        
        <div id="source" thisDiv="thisDiv">@Html.DisplayFor(modelItem => item.UserName)</div>        //这是隐藏层
        <div id="hideDiv" style="display:none; background-color:#f5f5f5;">@item.UserName 用户详细信息...</div>
  
    }

Answer 1

id是唯一的
document.getElementById("hideDiv")只会获得第一个

Answer 2

    window.onload = function () {
            var allDiv = document.getElementsByTagName("div");
            for (var i = 0; i < allDiv.length; i++) {
                if (allDiv[i].thisDiv == "thisDiv") {
                    allDiv[i].onmouseover = function(){
                             allDiv[i].style.display="block" ; 
                       }; 
                    allDiv[i].onmouseout = function(){
                            allDiv[i].style.display="none" ; 
                        }; 
                }
            }
        }

Answer 3

function showDiv() {
var evt=window.event,obj=evt.srcElement,next=obj.nextSibling;
next.style.display = "block";
}function hideD() {
var evt=window.event,obj=evt.srcElement,next=obj.nextSibling;
next.style.display = "none";
}自己调兼容性吧

Answer 4

2 种思路1、 每个div 对应一个 显示信息的div. 
    鼠标移动带div上，显示对应的div.同时隐藏上次显示的那个div!2、所有div 用同一个 msgDiv 显示信息鼠标移动带div上，设置msgDiv 的内容和坐标，并显示

Answer 5

   这个代码有问题，  修正下- -！
 window.onload = function () {
            var allDiv = document.getElementsByTagName("div");
            for (var i = 0; i < allDiv.length; i++) {
                if (allDiv[i].thisDiv == "thisDiv") {
                    allDiv[i].setAttribute("onmouseover","showDiv(this)");
                    allDiv[i].setAttribute("onmouseout","hideD(this)");
                }
            }
        }        function showDiv(obj) {
            obj.style.display = "block";
        }
        function hideD(obj) {
            obj.style.display = "none";
        }

Answer 6

你隐藏层里放的不是详细信息吗?//这是隐藏层
        <div id="hideDiv" style="display:none; background-color:#f5f5f5;">@item.UserName 用户详细信息...</div>
  
    } 
 
 

Answer 7

通过节点的访问方式
window.onload = function () {
            var allDiv = document.getElementsByTagName("div");
            for (var i = 0; i < allDiv.length; i++) {
                if (this.thisDiv == "thisDiv") {
                    this.onmouseover = function(){
                           //获取前一个节点
                         var popdiv=this.nextSibling；
                           popdiv.style.display='';
                        }
                    allDiv[i].onmouseout = function(){
                         var popdiv=this.nextSibling；
                           popdiv.style.display='none';
                         }
                }
            }
        }        function showDiv() {
            document.getElementById("hideDiv").style.display = "block";
        }
        function hideD() {
            document.getElementById("hideDiv").style.display = "none";
        }

Answer 8

改进一下 控制显示层的位置在当前鼠标的位置下方window.onload = function () {
            var allDiv = document.getElementsByTagName("div");
            for (var i = 0; i < allDiv.length; i++) {
                if (allDiv[i].thisDiv == "thisDiv") {
                    this.onmouseover = function(){
                           //获取前一个节点
                         var popdiv=this.nextSibling；
                           popdiv.style.display='';
                          popdiv.style.left=scontol.getAbsoluteLeft(this)+'px';
                          popdiv.style.top=parseInt(scontol.getAbsoluteTop(this)+scontol.getAbsoluteHeight(this))+'px';
                        }
                    allDiv[i].onmouseout = function(){
                         var popdiv=this.nextSibling；
                           popdiv.style.display='none';
                         }
                }
            }
        }//获取控件的位置
var scontol = {
    getAbsoluteLeft: function (ob) {
        var mendingLeft = ob.offsetLeft;
        while (ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY") {
            mendingLeft += ob.offsetParent.offsetLeft;
            ob = ob.offsetParent;
        }
        return mendingLeft;
    },
    getAbsoluteTop: function (ob) {
        var mendingTop = ob.offsetTop;
        while (ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY") {
            mendingTop += ob.offsetParent.offsetTop;
            ob = ob.offsetParent;
        }
        return mendingTop;
    },
    getAbsoluteHeight: function (ob) {
        return ob.offsetHeight
    },
    getAbsoluteWidth: function (ob) {
        return ob.offsetWidth
    }
}