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 に答える