AJAX 返回数组中的上一个值

AJAX returns previous value in array

本文关键字：上一个 返回 数组 AJAX      更新时间：2023-09-26

我正在制作一个网站来托管艺术品。这个想法是，当页面加载时，我让JavaScript运行一个php文件，该文件向服务器进行查询，以获取图像文件(艺术品.jpg(的名称和ID，并将它们显示为页面上的缩略图。

当您滚动到缩略图上时，图稿在屏幕的不同部分显示得更大，并且艺术品的描述、规格等会淡入。我的问题是，当我进行第二次 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');
    });
};

当我在 get_id() 方法中console.log(this['ID'])时，控制台中会显示正确的值，但是当我在详细信息方法中console.log("art method"+this['ID']时，我得到的值等于之前滚动到缩略图 ID 上的值。我真的很感激对这个问题的任何见解。

这与使用setTimeout()有关吗？如果不指定方法的超时，我的代码将无法运行。例如，如果我加载页面，然后滚动 ID 为 14 然后是 13 的图像，我的控制台将显示：

14
13  
art method 14

问题是您正在附加更多相同的事件。在第一个 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++;
  });
}

您可以看到由于所有追加的 mouseenter 事件，计数器是如何多次递增的。

相关文章：