如何更改下一个和上一个按钮上的标题？答案

【问题标题】：how to change title on Next and Previous button?如何更改下一个和上一个按钮上的标题？
【发布时间】：2013-02-09 06:17:24
【问题描述】：

我正在将 Youtube 视频提取到具有下一个和上一个按钮的轮播中。我还添加了演示链接..

如何更改下一个和上一个按钮的标题、描述、总浏览量？

    <script type="text/javascript">
$(document).ready(function(){});

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/cZxy-GpHLCQ_Ss9sGJfWhzBAIOMDYxMN?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function(data) {
var list_data="";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var url = videoURL + videoID;
var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
list_data += '<div><a href= "#" title="'+ feedTitle +'"><img src="'+ thumb +'" width="213px" height="141px"/></a></div>';
});
$(list_data).appendTo(".slides");
$('.carousel').carousel({carouselWidth:930,carouselHeight:330,directionNav:true,shadow:true,buttonNav:'bullets'});

var cnt = 0;
$(".nextButton").click(function () {
var len = $(this).siblings(".slides").children(".slideItem").length;
var a = cnt++;



  });

});
</script>

这里是演示链接http://jsfiddle.net/EzKQy/

【问题讨论】：

标签： javascript jquery json youtube-api

【解决方案1】：

除了库提供的属性，

您可以根据两个 css 属性选择最顶部的项目：

带有top = 0px的项目
z-index = <Total Slides-1> 的项目

所以下面的 sn-p 应该这样做（并更新标题）：

var $items = $(".slides").find(".slideItem");
$(".nextButton, .prevButton").click(function () {
$("#title").text($items.filter(function () {
        return $(this).css("top") == "0px";
   }).find("a").attr("title"));
});

这是你的updated fiddle。

【讨论】：

【解决方案2】：

根据 youtube API v2，

> The API response for a playlist feed is almost identical to a typical
> video feed or set of search results. However, a video entry in a
> playlist feed differs from a typical video entry in the following
> ways:
> 
> Each playlist entry contains the <yt:position> tag, which specifies
> the place that the video appears in the playlist order. The
> <yt:position> tag is a subtag of the <entry> tag.
> 
> If the user defined a custom title for the video, that title appears
> in the <atom:title> tag, and the video's original title appears in the
> <media:title> tag.

所以问题的解决方案是从收到的 JSON 中获取标题的 yt:position 将下一个按钮连接到 yt:下一个兄弟的位置，将上一个按钮连接到上一个兄弟。您也可以发挥创意，在此基础上随机播放视频。

【讨论】：