タイトルを適切な場所に取得できません。

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;} 
    }