Question

在我的网页上，我有一个图像列表。目前，当用户将鼠标悬停在任何图像上3秒钟时，会执行showUpdateImageDialog()方法，这会导致弹出jQuery对话框。如果用户在3秒内的任何时刻将鼠标移离图像，则重置计时器并且jQuery对话框永远不会显示：

HTML：

<ul class="imageGroup">
    <li class="imageLi">
        <img class="image" src="fizz/buzz/blah.jpg"/>
    </li>
    <li class="imageLi">
        <img class="image" src="fizz/buzz/example.jpg"/>
    </li>
    ...
</ul>

<div id="edit-image-description-frame" title="Update Image Description">
    <div id="thumbnail-dialog-image-container">

        <!-- How do I get the 'src' attribute to be the correct image file? -->
        <img src="???"/>
    </div>

</div>

JS：

$(".imageLi").live({
    mouseenter:
        function()
        {
            window.myTimeout = setTimeout(showUpdateImageDialog,3000);
        },
    mouseleave:
        function()
        {
            clearTimeout(window.myTimeout);
        }
});

function showUpdateImageDialog()
{
    $('#edit-image-description-frame').dialog({
        modal:true,
        minHeight:500,
        minWidhth:500
    });
}

不幸的是，此代码的行为与用户悬停在列表中的哪个图像无关的行为相同。我需要一种方法让jQuery对话框显示用户悬停的特定图像：

如何将图像的源传递给jQuery，以便我可以让对话框将此图像呈现给用户？这可能看起来很奇怪，但对话框将允许用户编辑有关的元数据图像和更新元数据。由于其他约束，我需要使用图像的src属性来查找元数据。提前谢谢！

Answer 1

$(".imageLi").live({
    mouseenter: function()
    {
        var src = $(this).children('img')[0].src;
        window.myTimeout = setTimeout(function ()
        {
            showUpdateImageDialog(src);
        },3000);
    },
    mouseleave: function()
    {
        clearTimeout(window.myTimeout);
    }
});

function showUpdateImageDialog(src)
{
    $('#thumbnail-dialog-image-container').children('img')[0].src = src;

    $('#edit-image-description-frame').dialog({
        modal:true,
        minHeight:500,
        minWidth:500
    });
}

Answer 2

将其作为参数传递给您的函数

$(".imageLi").live({
    mouseenter:
        function()
        {
            var element = $(this).find('img');
            window.myTimeout = setTimeout(function(){showUpdateImageDialog(element);},3000);
        },
    mouseleave:
        function()
        {
            clearTimeout(window.myTimeout);
        }
});

function showUpdateImageDialog(image)
{
   // do what you want with image variable
   // it refers to the img element inside the li that was hovered
    $('#edit-image-description-frame').dialog({
        modal:true,
        minHeight:500,
        minWidhth:500
    });
}

如何将特定的列表元素传递给Javascript函数

2 个答案: