javascript - AJAX 返回数组中的前一个值

Question

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

当您滚动缩略图时，艺术品会在屏幕的不同部分显示得更大，并且艺术品的描述、规范等会逐渐消失。我的问题是，当我进行第二个 AJAX 调用时，它会附加之前将鼠标悬停在图像上的值显示到屏幕上，并且在将鼠标悬停在至少两个图像上之前不会执行任何操作。

这是我的第一个 ajax 调用的代码，该调用将缩略图附加到页面并使用缩略图的 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 的图像，然后滚动到 ID 为 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 事件而增加多次。