YouTube API - 根据 API 抓取缩略图的鼠标悬停更改 H1 标签？答案

【问题标题】：YouTube API - change H1 tag based on mouseover of API grabbed thumbnails?YouTube API - 根据 API 抓取缩略图的鼠标悬停更改 H1 标签？
【发布时间】：2015-06-25 03:30:26
【问题描述】：

我正在为我的网站制作“最新视频”部分。在将其移至主页之前，我试图将其放在测试页面上。我有一个 API 调用来获取我最近 3 次上传的信息，并吐出他们的缩略图。它还将缩略图链接到相应的视频。然后，当缩略图悬停时，我想要做的是将“最新视频”h1 标签更改为视频的标题。考虑到以下代码，我将如何做到这一点？（我从这个例子中取出了我的播放列表 ID 和 API 密钥。）

<body>
<h1 id="mouse">Newest Videos</h1>
<div id="thumbnail">
    <a href="#" id="link1" target="new"><img id="thumb1" src="img/ajax-loader.gif" /></a>
    <a href="#" id="link2" target="new"><img id="thumb2" src="img/ajax-loader.gif" /></a>
    <a href="#" id="link3" target="new"><img id="thumb3" src="img/ajax-loader.gif" /></a>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=OnLoadCallback"></script>
<script>
    $thumbnail = $('#thumbnail');
    $.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=3&playlistId=+{PlaylistID}&key={MyAPIKEY}', function ( data ) {
        $('#thumb1').attr('src', data.items[0].snippet.thumbnails.medium.url);
        $('#link1').attr('href', 'https://youtube.com/watch?v='+data.items[0].snippet.resourceId.videoId);
        $('#thumb2').attr('src', data.items[1].snippet.thumbnails.medium.url);
        $('#link2').attr('href', 'https://youtube.com/watch?v='+data.items[1].snippet.resourceId.videoId);
        $('#thumb3').attr('src', data.items[2].snippet.thumbnails.medium.url);
        $('#link3').attr('href', 'https://youtube.com/watch?v='+data.items[2].snippet.resourceId.videoId);
    });
</script>

如果每个视频的标题位于 data.items[#].sn-p.title 中，我将如何在缩略图鼠标悬停时替换 h1 标签的文本？

【问题讨论】：

标签： javascript jquery html youtube

【解决方案1】：

您可以在您的.get 回调中添加一些类似的内容：

$('#link1').mouseover(function() { $('#mouse').text(data.items[0].snippet.title);});

并在鼠标移开时恢复：

$('#link1').mouseout(function() { $('#mouse').text('Newest Videos');});

【讨论】：

好的，太棒了！谢谢！是否可以通过一些 if/else if 语句将这些链接起来，让我在鼠标未悬停时让它恢复原状？
在答案中添加了mouseout 代码，当鼠标离开链接时，该代码会将文本恢复为Newest Videos。