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

Question

我正在为我的网站制作 "latest videos" 版块。在将其移至主页之前，我试图将其放在测试页上。我有一个 API 调用，它获取我最近 3 个上传的信息，并吐出它们的缩略图。它还将缩略图链接到相应的视频。我想要做的是当鼠标悬停在缩略图上时，将 "Latest Videos" 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[#].snippet.title，我如何替换缩略图鼠标悬停时 h1 标签的文本？

Answer 1

您可以将这些内容添加到您的 .get 回调中：

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

并在鼠标移开时恢复原状：

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

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

YouTube API - change H1 tag based on mouseover of API grabbed thumbnails?

html

javascript

youtube

jquery