JavaScript "this"不适用于 HTML 元素

标签 javascript php html css mysql

我想在带有 img 元素的 div 中显示信息,我正在通过 php 访问数据库。我正在将 onmouseover event 与每个元素相关联,并将 this 和一些参数作为参数传递,但是当我将鼠标悬停在图像上时,div 显示在左上角浏览器,不显示在图像旁边。

我也尝试过删除 this,结果还是原来的那个。

图片元素代码

         $row = mysqli_fetch_array($result);

          $firstname = $row['firstname'];

          $lastname = $row['lastname'];

          $image =    $row['image'];

          $phone =    $row['phone'];

          $email =    $row['email'];

     $realtorData = $firstname.'|'.$lastname.'|'.$phone.'|'.$email.'|';
echo "<img src='/../../Realtors/$image'onmouseover='showRealtorInfo(this,\"".$realtorData."\" );' onmouseout='hideRealtorInfo();'>";

JavaScript 代码

  function showRealtorInfo(element, realtorInfo)
{
    var realtorArray = realtorInfo.split('|');

    var firstname = realtorArray[0];
    var lastname  = realtorArray[1];
    var phone     = realtorArray[2];
    var email     = realtorArray[3];

    var realtorInfoDiv = document.getElementById('realtorinfo');

    var myHTML  = "<p><b>" + firstname + " " + lastname + "</b><br /><br />";
        myHTML += "Phone: " + phone + "<br />";
        myHTML += "Email: " + email + "<br />";

    realtorInfoDiv.innerHTML = myHTML;

    x = element.offsetLeft;
    y = element.offsetTop;

    //alert(x);

    realtorInfoDiv.style.left = y + 100;
    realtorInfoDiv.style.top = x + 550;



    realtorInfoDiv.style.visibility = 'visible';


}

div元素的CSS代码

#realtorinfo{

position: absolute;
left: 10px;
top: 10px;
width: 200px;
height: 150px;
padding: 5px;
background-color: yellow;
visibility: hidden;
float: left;

} 

最佳答案

您没有在后续 LOC 中提及“px”。

realtorInfoDiv.style.left = y + 100;
realtorInfoDiv.style.top = x + 550;

这应该有效:

realtorInfoDiv.style.left = y + 100 + "px";
realtorInfoDiv.style.top = x + 550 + "px";

关于JavaScript "this"不适用于 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54527740/

相关文章:

javascript - RabbitMQ:前一项完成后消费项目

php - pdfparser说: 'Secured pdf file are currently not supported.' [closed]

javascript - 为什么在 2.2 及更高版本中从 Android 浏览器中删除了对 HTML5 Web Workers 的支持?

javascript - mongoose/mongodb 计算统计数据的最佳方法

javascript - 如何使用 JavaScript 数组通过 for 循环一次性检索 JSON 对象的值

php - 查询的奇怪行为

javascript - 我怎样才能执行javascript中的所有行

css - 如何将左侧div扩展到剩余高度?

html - 使用 CSS 对齐两个容器的元素

javascript - javascript对象和动画的问题