AJAX返回數組中的先前值

Question

我正在製作一個網站來託管作品。這個想法是，當頁面加載時，我有JavaScript運行一個PHP文件，該文件向服務器發出查詢以獲取圖像文件的名稱和ID（artwork.jpg），並將它們顯示爲頁面上的縮略圖。

當您在縮略圖上滾動時，藝術品在屏幕的不同部分顯示得更大，並且該藝術品的描述，規格等也會淡入。我的問題是，當我製作第二個AJAX調用它時在屏幕上添加之前被蒙上陰影的圖像的值，並且除非您至少關閉了兩張圖像，否則不會執行任何操作。

這是我的第一個AJAX調用追加縮略圖頁面，並與thumnbnail的id的值創建一個表單代碼：

function getArtDescriptions() 
{ 
    $.post('../../path/to/script/get_art.php', function(json) 
    { 
     if (json.art.length > 0) 
     { 

      $.each(json.art,function() 
      { 
        var info = 
           '<div class = "thumbnail_box">' 
           + '<img src = "images/thumbnails/' 
           + this['img'] 
           + '"id = "' 
           + this['ID'] 
           + '"> ' 
           + '<form id = "art_descriptions' 
           + this['ID'] 
           + '" ' 
           + 'name = "art_descriptions' 
           + this['ID'] 
           + '">' 
           + '<input type = "hidden" id = "descriptions" name = "descriptions" value = "' 
           + this['ID'] 
           + '"></form>' 
           + '</div>'; 

      }); 

     } 
     }, 'json'); 

} 

這是我使用，使第二代碼AJAX調用，是給我一個問題：

setTimeout(function get_id() 
{ 

    var tooltipTimeout; 

    $(".thumbnail_box img").on("mouseenter", function() 
    { 
     tooltipTimeout = setTimeout(details(this.id),0); 
     console.log(this.id); 

    }); 
    $(".thumbnail_box img").on("mouseleave", function() 
    { 
     hideTooltip(); 
    }); 

function hideTooltip() 
    { 
     clearTimeout(tooltipTimeout); 
     $(".description").fadeOut().remove(); 
    } 
}, 800); 



//GRAB DESCRIPTIONS FROM DATABASE AND 
function details(art) 
{ 
    var formname = "#art_descriptions"+art; 
    var filename = '../../file/path/to/script/get_descriptions.php'; 

    //console.log($(formname).serialize()); 

    $(".thumbnail_box img").on("mouseenter", function() 
    { 
     $.post(filename, $(formname).serialize(), function(json) 
     { 
     if (json.descriptions.length > 0) 
     { 
      //MAKE SURE TO EMPTY OUT DIV CLASSES FOR EACH TAB 

      $(".description").empty(); 

      $.each(json.descriptions,function() 
      { 
        console.log("art method"+this['ID']); 
        $(".description").append(this['description']+this['ID']).hide().fadeIn("fast"); 
      }); 

     } 
     }, 'json'); 
    }); 
}; 

當我console.log(this['ID'])在get_id()方法正確的值顯示在控制檯，但是當我在細節方法console.log("art method"+this['ID']我得到等於上一個值只是滾動縮略圖的ID。我真的很感謝在這個問題上的任何見解。

是否與使用setTimeout()有關？沒有指定方法的超時值，我的代碼就不會運行。例如，如果我加載頁面，然後滾動在具有ID的14後13的圖像，我的控制檯將顯示：

14 

13 
art method 14 

Answer 1

的問題是，要附加更多的相同事件。第一個mouseenter事件發生後，調用細節函數，然後附加另一個mouseenter事件。所以後續的電話會做同樣的事情。你可以在這裏看到一個例子：http://jsfiddle.net/6qre72fk/。

var counter = 0; 

$('#container1').on('mouseenter', function(){ 
    $('#container2').text('First mouseenter'); 
    appendingAnotherMouseEnter(); 
}); 

function appendingAnotherMouseEnter(){ 
    $('#container1').on('mouseenter', function(){ 
    $('#container2').text(counter); 
    counter++; 
    }); 
} 

您可以看到計數器由於所有附加的mouseenter事件而增加了幾次。