AJAX는 배열의 이전 값을 반환합니다.

Question

나는 아트웍을 호스트 할 웹 사이트를 만들고 있습니다. 아이디어는 페이지가로드 될 때 JavaScript가 이미지 파일 (artwork.jpg)의 이름과 ID를 가져 와서 페이지에 축소판으로 표시하도록 서버에 쿼리하는 php 파일을 실행한다는 것입니다.

축소판 그림을 스크롤하면 아트웍이 화면의 다른 부분에 크게 표시되고 미술 작품의 설명, 사양 등이 사라집니다. 내 문제는이 두 번째 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'); 
    }); 
}; 

을 때 i를 get_id() 올바른 값이 콘솔에 표시되는 방법,하지만에서 console.log(this['ID']) 세부 방법 I console.log("art method"+this['ID']은 내가 이전에 같은 값을 얻을 때 엄지 손톱의 ID를 스크롤하여 나는이 문제에 대한 어떤 통찰력도 정말로 고맙게 생각한다.

setTimeout()과 관련이 있습니까? 메소드에 타임 아웃을 지정하지 않으면 코드가 실행되지 않습니다. 예를 들어 내가 페이지를로드 한 후 ID의 14 다음 13 이미지를 통해 이동하면, 내 콘솔이 표시됩니다

14 

13 
art method 14 

Answer 1

문제는 같은 이벤트의 자세한 내용을 추가하는 것입니다. 첫 번째 mouseenter 이벤트가 발생하면 details 함수가 호출되고 다른 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++; 
    }); 
} 

모든 마우스 이벤트가 추가되어 카운터가 여러 번 증가하는 것을 확인할 수 있습니다.