Question

我正在制作一些缩略图并使用jquery为它们添加一些交互性。

我的标题仅显示在最后一个缩略图上。它不会单独显示我设置的字幕。如何解决这个问题，以便在我将鼠标悬停在任何缩略图上时添加标题？

使用Javascript：

$overlay = $('<div class="overlay"></div>');
$caption = $('<p class="caption"></p>')
$button= $('<button>More Info</button>');

$overlay.append($caption);
$overlay.append($button);

$(".thumbnail").append($overlay);
$(".overlay").hide();
$("#thumbnail-row li").mouseenter(function(event){
    var captionText = $(this).children("img").attr("alt");
    $caption.text(captionText);

    $(this).children(".overlay").fadeIn(500);

}).mouseleave(function(){
    $(".overlay").fadeOut();
});

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tom's Thumbnails</title>
    <link rel="stylesheet" type="text/css" href="thumbnail.css">
</head>
<body>

<ul id="thumbnail-row">
    <div class="thumbnail_container">
    <li class="thumbnail">
        <img src="http://i.telegraph.co.uk/multimedia/archive/02625/mountain1_2625884k.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed."/>
    </li>
    <p class="title">French Mountains</p>
    </div>
    <div class="thumbnail_container">
        <li class="thumbnail">
            <img src="http://i.telegraph.co.uk/multimedia/archive/02625/mountain1_2625884k.jpg" alt="Lorem ipsum doletur adipiscing elit. Sed."/>
        </li>
        <p class="title">French Mountains</p>
    </div>
    <div class="thumbnail_container">
        <li class="thumbnail">
            <img src="http://i.telegraph.co.uk/multimedia/archive/02625/mountain1_2625884k.jpg" alt="onsectetur adipiscing elit. Sed."/>
        </li>
        <p class="title">French Mountains</p>
    </div>

</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="thumbnail.js"></script>
</body>
</html>

Answer 1

在您的Javascript代码中，您有以下行：

$caption.text(captionText);

但是，在将$caption添加到$overlay，$overlay添加到每个.thumbnail之后，$caption变量将指向最后一个变量添加了 - 也就是说，第三张图片上的标题。因此，每次鼠标悬停时，最后一个标题元素都会更新其文本。如果你快速鼠标悬停在图像3上，然后是图像2，你可以看到这一点 - 图像2的替代文字会在图像3淡出之前显示在图像3上。

相反，要更改每个元素的标题，您需要使用选择器，就像您为每个叠加层淡化一样：

$(this).children(".overlay").children(".caption").text(captionText);

在这里演示：https://jsfiddle.net/f22j00Lf/1/

我的缩略图标题在jquery中无法正常工作

1 个答案: