使用Ajax将鼠标悬停在图像上后显示文本

Display text after mouseover on image using Ajax

本文关键字：显示 文本 图像 Ajax 鼠标 悬停 使用      更新时间：2023-09-26

我编写了这段代码，以便在鼠标悬停在图像上后显示信息。网站上有三张图片，每张图片都有自己的文字信息:

var resOb = new XMLHttpsRequest ();
 window.onload = function() {
document.getElementsByTagName("img").onmouseover = 
function sndReq(0) {
}
document.getElementsByTagName("img").onmouseover = 
function sndReq(1) {
}
document.getElementsByTagName("img").onmouseover =
function sndReq(2) {
}
  }
 function sndReq(i) {
 switch (i) {
 case 0:
 resOb.open('get', 'info0.txt', true);
 break;
 case 1:    
 resOb.open('get', 'info1.txt', true);
 break;
 case 2:
 resOb.open('get', 'info2.txt', true);
 break;
 resOb.onreadystatechange = function() { 
 handleResponse(i); 
  } 
  }
 function handleResponse () {
document.getElementById("info0").innerHTML =
  resOb.responseText;
}

遗憾的是它不工作，我无法找出问题在哪里。我需要一些帮助。

HTML输出

<!DOCTYPE html> 
 <html lang="de"> 
 <head> 
 <meta charset="utf-8"> 
 <title>AJAX</title> 
 <meta name="viewport" content= 
 "width=device-width; initial-scale=1.0"> 
  <link rel="stylesheet" type="text/css" 
  href="lib/css/stil.css" /> 
  <script type="text/javascript" 
 src="lib/js/ajaxeinsendeaufgabe2.js"></script> 
 </head> 
 <body> 
 <h1>Zusatzinformationen</h1> 
 <table> 
 <tr> 
 <td><img class="img" src="img/b1.jpg" data-file="info0" /></td> 
  <td id="info0"></td> 
  </tr> 
  <tr> 
  <td><img class="img" src="img/b2.jpg" /></td> 
    <td id="info1"></td> 
   </tr> 
   <tr> 
   <td><img class="img" src="img/b3.jpg" /></td> 
   <td id="info2"></td> 
   </tr> 
   </table> 
  </body> 
  </html>

您的句柄响应不使用i，它已硬编码"info0"。应该是:

function handleResponse (i) {
    document.getElementById("info"+i).innerHTML =
    resOb.responseText;
}

你也不需要一个开关箱，你可以这样做:

resOb.open('get','info'+i+'.txt',true);

是指向重构工具https://jsfiddle.net/pyr2447k/6/的链接

相关文章：