2

在我的网页上，我有一个图像列表。目前，当用户将鼠标悬停在任何图像上 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属性来查找元数据。提前致谢！

4

2 回答 2

3 
$(".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
    });
}
于 2012-04-23T21:07:25.420 回答
0

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

$(".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
    });
}
于 2012-04-23T21:08:45.330 回答