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']时，我得到的值等于之前滚动的缩略图＆＃39;的身份证。我真的很感激有关这个问题的任何见解。

是否与使用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++;
  });
}

由于所有附加了mouseenter事件，您可以看到计数器如何递增几次。

AJAX返回数组中的先前值

1 个答案: