jquery - 当用户将鼠标悬停在使用 JQuery 的链接上时如何显示图像

Question

我有一个产品列表。

<ul>
<li><a href="chair.php">CHAIR</a></li>
<li><a href="table.php">TABLE</a></li>
<li><a href="sofa.php">SOFA</a></li>
<li><a href="bookshelf.php">BOOKSHELF</a></li>
<ul>

鼠标悬停时，我想在 div #preview 中显示产品的缩略图。

我不想为每个图像硬编码 jquery。相反，我想编写 JQuery 来获取图像位置并插入到 DOM 中。我不知道如何标记 HTML 以包含图像位置。有什么想法吗？

Answer 1

我建议使用new HTML5 data attributes ，像这样:

<a href="chair.php" data-thumbnail-src="chair.jpg">CHAIR</a>

然后您可以按如下方式设置 jQuery 代码:

$(function () {
    var $preview = $("#preview");

    $("ul#products a").hover(function () {
        $preview.attr("src", $(this).attr("data-thumbnail-src"));
    }, function () {
        $preview.attr("src", "");
    });
});

在 jQuery 1.4.3 及更高版本中，我相信 $(this).data("thumbnail-src") 也可以工作。