我的缩略图标题在jquery中不工作

My Thumbnails Caption not working right in jquery

本文关键字：工作 jquery 略图 标题 我的      更新时间：2023-09-26

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

我的标题只显示在最后一个缩略图上。它不会单独显示我设置的标题。我怎么能解决这个问题，使它添加字幕时，我悬停在任何缩略图?

此处演示:https://jsfiddle.net/ywgrkgs1/

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>

在你的Javascript代码中有这样一行:

$caption.text(captionText);

但是在您将$caption添加到$overlay之后，将$overlay添加到每个.thumbnail之后，$caption变量将指向添加的最后一个—即第三张图片上的标题。每次鼠标移到最后一个标题元素时，它的文本都会更新。你可以看到这一点，如果你快速鼠标在图像3，然后图像2 -图像2的所有文本将显示在图像3上，然后淡出。

相反，要更改每个元素的标题，您需要使用选择器，就像您对每个覆盖层褪色一样: 
$(this).children(".overlay").children(".caption").text(captionText);

此处演示:https://jsfiddle.net/f22j00Lf/1/

相关文章：