我正在为我的网站制作“最新视频”部分。在将其移至主页之前，我试图将其放在测试页面上。我有一个 API 调用来获取我最近 3 次上传的信息，并吐出他们的缩略图。它还将缩略图链接到相应的视频。然后，当缩略图悬停时，我想要做的是将“最新视频”h1 标签更改为视频的标题。考虑到以下代码，我将如何做到这一点？ (我从这个例子中取出了我的播放列表 ID 和 API key 。)
<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 标签的文本？
最佳答案
您可以将这些内容添加到您的 .get打回来:
$('#link1').mouseover(function() { $('#mouse').text(data.items[0].snippet.title);});
并在鼠标移开时恢复:
$('#link1').mouseout(function() { $('#mouse').text('Newest Videos');});
关于javascript - YouTube API - 根据 API 抓取缩略图的鼠标悬停更改 H1 标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31040738/