Question

我正在制作一部＆＃34;最新视频＆＃34;我网站的部分。在我将其移至主页之前，我试图将其放在测试页面上。我有一个API调用，可以抓取我最近3次上传的信息，并吐出他们的缩略图。它还将缩略图链接到适当的视频。我想要做的就是更改＆＃34;最新视频＆＃34;当缩略图被鼠标悬停时，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标签？

1 个答案: