Question

此演示中有一些错误。我想将相同的事件添加到同一个类但是diff ID。代码像这样

    var self;
    var id;
    var result;
    var myArray=document.getElementsByClassName("tipDiv");
    for (var i=0;i<myArray.length;i++)
        {
            document.getElementsByClassName("tipDiv")[i].onmouseover=(function(num){
                return function() {            
                    $(this).myHoverTip("hoverDiv","");
                    }
            })(i);   
            document.getElementsByClassName("tipDiv")[i].onmouseout=(function(num){
                return function() {            
                    $(this).cleanHover("hoverDiv");
                    }
            })(i);        
        }


$.fn.myHoverTip = function(divId, value) 
   {
        var div = $("#" + divId); 
        div.css("position", "absolute");
        self = $(this); 
        id = self.attr("id");
        self.hover(function() 
            {
            div.css("display", "block");
            var p = self.position(); 
            var x = p.left + self.width();
            var docWidth = $(document).width();
            if (x > docWidth - div.width() - 20) 
                {
                x = p.left - div.width();
            }
            div.css("left", x);
            div.css("top", p.top);
                function showCustomer(str)
                {
                var xmlhttp;
                if (str=="")
                  {
                  result="";
                  return;
                  }
                if (window.XMLHttpRequest)
                  {// code for IE7+, Firefox, Chrome, Opera, Safari
                  xmlhttp=new XMLHttpRequest();
                  }
                else
                  {// code for IE6, IE5
                  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                xmlhttp.onreadystatechange=function()
                  {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                    result=xmlhttp.responseText;
                    }
                  }
                xmlhttp.open("GET","getbrand.asp?q="+str,true);
                xmlhttp.send();
                div.html(id+result+myArray.length);
                }
            showCustomer(id);

            },

    function() {
        div.css("display", "none");
        div.html("");
    }
    );

 return this;
}

请帮我修复bug ... 它不像我想要的那样工作。第一次鼠标移动悬停不起作用。第二次得到错误的值。在第三个移动获得正确的价值。然后我转到下一个DIV。它将获得最后一个值。请帮我！抱歉我的英文。

Answer 1

首先，您不必在forloop中再次执行document.getElementsByClassName("tipDiv")。这已存储在myArray中，因此您只需使用myArray[i] ..

即可

但是你为什么不使用jquery和悬停功能呢？ api.jquery.com/hover。有了这个，你可以选择你的班级：

$（ “hoverDiv”）。悬停（...）

这会让你觉得更容易......

或使用jquery中的mouseOver函数： http://api.jquery.com/mouseover/

当我向同一个类不同的ID添加事件时的一些错误

1 个答案: