Javascript 如何更改“下一步”和“上一步”按钮上的标题?

Javascript 如何更改“下一步”和“上一步”按钮上的标题?,javascript,jquery,json,youtube-api,Javascript,Jquery,Json,Youtube Api,我正在将Youtube视频下载到carousal中,它有“下一步”和“上一步”按钮。我还添加了演示链接 如何更改“下一步”和“上一步”按钮的标题、说明和总视图 <script type="text/javascript"> $(document).ready(function(){}); var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/cZxy-GpHLCQ_Ss9sGJfWhzBAIOMDYx

我正在将Youtube视频下载到carousal中,它有“下一步”和“上一步”按钮。我还添加了演示链接

如何更改“下一步”和“上一步”按钮的标题、说明和总视图

    <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>

$(文档).ready(函数(){});
var playlayurl='1〕http://gdata.youtube.com/feeds/api/playlists/cZxy-GpHLCQ_Ss9sGJfWhzBAIOMDYxMN?v=2&alt=json&callback=?';
var videoURL=http://www.youtube.com/watch?v=';
$.getJSON(播放列表URL、函数(数据){
var列表_数据=”;
$。每个(data.feed.entry,函数(i,项){
var feedTitle=项目名称$t;
var feedURL=item.link[1].href;
var fragments=feedURL.split(“/”);
var videoID=fragments[fragments.length-2];
var url=videoURL+videoID;
变量thumb=”http://img.youtube.com/vi/“+videoID+”/default.jpg”;
列表_数据+='';
});
$(列表数据)。附加到(“.slides”);
$('.carousel').carousel({carouselWidth:930,carouselHeight:330,directionNav:true,shadow:true,buttonNav:'子弹'});
var-cnt=0;
$(“.nextButton”)。单击(函数(){
var len=$(this).slides(“.slides”).children(“.slideItem”).length;
var a=cnt++;
});
});

以下是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.
>播放列表提要的API响应与典型的
>视频源或一组搜索结果。但是,在
>播放列表提要与典型视频条目的不同之处如下
>方式:
> 
>每个播放列表条目都包含标签,用于指定
>视频在播放列表顺序中出现的位置。这个
>标记是标记的子标记。
> 
>如果用户为视频定义了自定义标题,则会显示该标题
>在标记中,视频的原始标题将显示在
>标签。
因此,问题的解决方案是从接收到的JSON中获取标题的yt:position 将下一个按钮挂接到yt:下一个同级的位置,将上一个按钮挂接到上一个同级的位置。
你也可以基于此进行创造性的视频随机洗牌。

除了库提供的属性

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

  • 顶部带有
    的项目
    =
    0px

  • 带有
    z索引的项目
    =

因此,下面的代码段应该可以做到这一点(&同时更新标题):

这是你的

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