Question

我的目标是将鼠标悬停在图像上，并将标题显示在相应的图像下方。我已经制作了标题，但总是出现在列表中的最后一张图片上。我已经被困了几个小时试图解决这个问题，我似乎无法做到这一点。我做错了什么？

   function processResponse()
 {
  // if request completed successfully and responseXML is non-null
  if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 && 
     asyncRequest.responseXML )
  {
     clearImages(); // prepare to display a new set of images

     // get the covers from the responseXML
     var covers = asyncRequest.responseXML.getElementsByTagName(
        "cover" );

     // get the title of the covers from the resonseXML
     var titles = asyncRequest.responseXML.getElementsByTagName("title");

     // get base URL for the images
     var baseUrl = asyncRequest.responseXML.getElementsByTagName( 
        "baseurl" ).item( 0 ).firstChild.nodeValue;

     // get the placeholder div element named covers
     var output = document.getElementById( "covers" );

     // create an unordered list to display the images
     var imagesUL = document.createElement( "ul" );

     // place images in unordered list
     for ( var i = 0; i < covers.length; ++i )
     {
        var cover = covers.item( i ); // get a cover from covers array

        // get the image filename
        var image = cover.getElementsByTagName( "image" ).
           item( 0 ).firstChild.nodeValue;

        // get the title of the cover
        var title = cover.getElementsByTagName( "title" ).item( 0 ). firstChild.nodeValue;

        // create li and img element to display the image
        var imageLI = document.createElement( "li" );
        var imageTag = document.createElement( "img" );
        var titleText = document.createElement( "p" );
        var tt = "text"+i;
        var ii = "img"+i;


        // set img element's src attribute
        imageTag.setAttribute( "src", baseUrl + escape( image ) );
        imageTag.setAttribute( "alt", title);
        imageTag.setAttribute( "id", ii);
        titleText.setAttribute( "id", tt);
        imageLI.appendChild(imageTag);
        imageLI.appendChild(titleText);
        imagesUL.appendChild( imageLI ); // place li in ul

        imageTag.addEventListener("mouseover", function() {
            var alt = this.alt;
            titleText.textContent = alt;
        });
        imageTag.addEventListener("mouseleave", function() {
            titleText.textContent = null;
        });
     } // end for statement

Answer 1

尝试在附加节点
之前添加事件侦听器

function processResponse()
{
 // if request completed successfully and responseXML is non-null
 if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 && 
 asyncRequest.responseXML )
{
 clearImages(); // prepare to display a new set of images

 // get the covers from the responseXML
 var covers = asyncRequest.responseXML.getElementsByTagName(
    "cover" );

 // get the title of the covers from the resonseXML
 var titles = asyncRequest.responseXML.getElementsByTagName("title");

 // get base URL for the images
 var baseUrl = asyncRequest.responseXML.getElementsByTagName( 
    "baseurl" ).item( 0 ).firstChild.nodeValue;

 // get the placeholder div element named covers
 var output = document.getElementById( "covers" );

 // create an unordered list to display the images
 var imagesUL = document.createElement( "ul" );

 // place images in unordered list
 for ( var i = 0; i < covers.length; ++i )
 {
    var cover = covers.item( i ); // get a cover from covers array

    // get the image filename
    var image = cover.getElementsByTagName( "image" ).
       item( 0 ).firstChild.nodeValue;

    // get the title of the cover
    var title = cover.getElementsByTagName( "title" ).item( 0 ). firstChild.nodeValue;

    // create li and img element to display the image
    var imageLI = document.createElement( "li" );
    var imageTag = document.createElement( "img" );
    var titleText = document.createElement( "p" );
    var tt = "text"+i;
    var ii = "img"+i;


    // set img element's src attribute
    imageTag.setAttribute( "src", baseUrl + escape( image ) );
    imageTag.setAttribute( "alt", title);
    imageTag.setAttribute( "id", ii);
    titleText.setAttribute( "id", tt);

    (function(imageTag,titleText){
         imageTag.addEventListener("mouseover", function() {
            var alt = this.alt;
            titleText.textContent = alt;
         });
        imageTag.addEventListener("mouseleave", function() {
            titleText.textContent = null;
         });         
    }(imageTag,titleText));


    imageLI.appendChild(imageTag);
    imageLI.appendChild(titleText);
    imagesUL.appendChild( imageLI ); // place li in ul

 } // end for statement

Answer 2

这是因为关闭。

在：

    imageTag.addEventListener("mouseover", function() {
        var alt = this.alt;
        titleText.textContent = alt;
    });
    imageTag.addEventListener("mouseleave", function() {
        titleText.textContent = null;
    });

后：

    imageTag.addEventListener("mouseover", display(titleText, title));
    imageTag.addEventListener("mouseleave", remove(titleText));
    function display(i,j){
        return function() {i.textContent = j;}
    }
    function remove(i){
        return function() {i.textContent = null;}
    }

无法在正确的地方获得头衔

2 个答案: