我正在制作一个网站来托管艺术品。这个想法是,当页面加载时,我让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 事件,计数器是如何多次递增的。