Javascript 视频阵列不工作

当我点击

标签中的一个按钮时，它们都播放相同的视频，而不是它应该播放的视频。这以前奏效，但我就是找不到我改变的东西。有人能指出吗？

脚本是

$("li, .thumbs").on('click', function() {   
        var numb = $(this).index(),
            videos = [" ", "http://homepage.mac.com/qt4web/A-chord.m4v",
            "images/intro01.m4v",
            "http://homepage.mac.com/qt4web/A-chord.m4v",
            "http://video-js.zencoder.com/oceans-clip.mp4",
            "images/clip2.m4v",
            "images/intro01.m4v",
            "images/clip2.m4v"],
            myVideo = document.getElementById("myVid");
            myVideo.src = videos[numb];
            myVideo.load();
            setTimeout(function(){
                myVideo.play();
                }, 200);

html是

<ul class="thumbs">
              <div style="top:-128px;"><li rel="0"><img src="" alt="" width="280" height="128" /></li></div>  
              <div style="top:0px;"><li rel="1"><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div>
              <div style="top:128px;"><li rel="2"><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div>
              <div style="top:256px;"><li rel="3"><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div>
              <div style="top:384px;"><li rel="4"><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div>
              <div style="top:512px;"><li rel="5"><img src="graphics/filler.png" alt="" width="280" height="128" /></li></div>
              <div style="top:640px;"><li rel="6"><img src="graphics/filler2.png" alt="" width="280" height="128" /></li></div>
    </ul> 

编辑：我非常抱歉这段时间太长了，但我正在发布脚本，以防万一。阵列在某种程度上工作正常，可能就在这里

$(document).ready(function () {
    var video = $("#myVid");    
    $("#MyT").fadeOut();
    video.on("loadedmetadata", function() {});
    $("li, .thumbs").bind("touchstart click", function() {
        $("#bigPic").removeClass("move");
        $("#MyT").fadeIn(0);});
        <!--$(".slider, .timeBar").fadeOut(0).fadeIn(0);
    $("li, .thumbs").on('click', function() {   
        var numb = $(this).index();
            videos = [" ", "http://homepage.mac.com/qt4web/A-chord.m4v",
            "images/intro01.m4v",
            "http://homepage.mac.com/qt4web/A-chord.m4v",
            "http://video-js.zencoder.com/oceans-clip.mp4",
            "images/clip2.m4v",
            "images/intro01.m4v",
            "images/clip2.m4v"];
            myVideo = document.getElementById("myVid");
            myVideo.src = videos[numb];
            myVideo.load();
            setTimeout(function(){
                myVideo.play();
                }, 200);            
    $("#myVid").bind("loadeddata", function() {
        $("#bigPic").addClass("move");
        $("#MyT").fadeOut(750);
    });
    $("#myVid").bind("playing", function() {
        ("#bigPic").removeClass("move");
        $("#MyT").fadeOut(750);    
            });
    $("#myVid").bind("ended", function () {
        $("#bigPic").removeClass("move");       
    function playArray(index,ele,array,listener){
    ele.removeEventListener(listener||0);
    ele.src = array[index];
    ele.load();
    ele.play();
    index++;
    if(index>=array.length){
        index=i;
    }
    listener = ele.addEventListener('ended',function(){
        playArray(index,ele,array,listener);
    },false);
}
playArray(0,document.getElementById("myVid"),videos);   
}); 
video.on("timeupdate", function() {
        var currentPos = myVid.currentTime;
        var maxduration = myVid.duration;
        var perc = 100 * currentPos / maxduration;
        $(".timeBar").css("width",perc+"%");    
    });
    var updatebar = function(x) {
        var progress = $(".progress");
        //calculate drag position
        //and update video currenttime
        //as well as progress bar
        var maxduration = myVid.duration;
        var percentage = 100 * position / progress.width();
        if(percentage > 100) {
            percentage = 100;
        }
        if(percentage < 0) {
            percentage = 0;
        }
        $(".timeBar").css("width",percentage+"%");  
        myVid.currentTime = maxduration * percentage / 100;};
});                 
});

$(function(){
  $("#content div:not(.slider)").bind('touchstart click', function() {
  $(".slider").animate({ top: $(this).offset().top, height: $(this).height() });
  });
  });

   $(function(){
$("#content div:not(.control)").bind('click', function() {
  // first, we hide .control, then do animation, then in the callback we do fadeIn
  $(".control").hide().animate({
    top: $(this).offset().top,
    height: $(this).height()
    }, function() {
       $(this).fadeIn();
    }
  );
});
});

$（文档）.ready（函数（）{
var视频=$（“#myVid”）；
$（“MyT”）.fadeOut（）；
on（“loadedmetadata”，function（）{}）；
$（“li，.thumbs”）.bind（“touchstart单击”，函数（）{
$（“#bigPic”）.removeClass（“移动”）；
美元（“#MyT”）.fadeIn（0）；}）；
尝试：

您可能想尝试修改获取索引的方式：

而不是

var numb = $(this).index();

您可以使用：

var numb = $(this).prevAll().length;

使用
以外的任何HTML元素作为
的直接子元素是无效的-尽管这不是你要问的。我的2美分。@inhan实际上，当我取出divx时也会发生同样的事情。这就是为什么我将其作为注释而不是答案来写。我知道这不会解决问题。只是一个旁注…@Nat这可能是因为
myVideo=$（“#myVid”）
应该是类似于
myVideo=$（“#myVid”）.get（0）；
，这与代码本身相同。
var numb = $(this).prevAll().length;