Javascript jQuery AnythingSlider和验证

我找到了一个anything滑块示例，但我似乎无法在页面加载时启动图片。它只在你点击框的时候开始（你可以看到任何东西滑块的轮廓），我也在尝试验证页面上表单上的一些信息。我的JS没有任何错误，但没有任何验证。下面是我的JS，这是指向我的JSFIDLE的链接

$（函数（）{
$（“#tabs”）.tabs（）；
$（'rt#u depart_date'）。日期选择器（）；
$（'#rt#u return_date'）。datepicker（）；
$（'ow#u depart_date'）。日期选择器（）；
$（“#旅行”）。验证({
规则：{
rt_出发城市：{
要求：正确，
},
抵达城市：{
要求：正确，
}, 
出发日期：{
要求：正确，
},
返回日期：{
要求：正确，
},    
}，//结束规则
信息：{
rt_出发城市：{
必填项：“必填字段”，
},
抵达城市：{
必填：“必填字段。”，
},      
出发日期：{
必填项：“必填字段”，
},
返回日期：{
必填项：“必填字段”，
},
}//结束消息
})；//结束验证
});
$（文档）.ready（函数（）{
var currentAlbum=“机场”，
相册={
“机场1”：{
“图片1”：“images/14.jpg”，
“图2”：“images/airport coworking.jpg”，
“图片3”：“图片/机场主页.jpg”
},
“机场2”：{
“图4”：“images/chania airport.jpg”，
“图5”：“images/Mumbai_Airport.jpg”，
图6:“images/Washington.jpg”
},
},
$slider=$（“#slider”），
滑块选项={
自动播放：对，
},
图标='≡；'，//相册图标
$album，$overlay，
showAlbum=功能（滑块）{
变量$icon=$（''+图标+''）；
滑块。$窗口
.prepend（$icon）
.on（'mouseenter mouseleave'，函数（e）{
$icon.toggle（e.type=='mouseenter'）；
})
.on（'单击'，函数（））{
$album.show（）；
$overlay.show（）；
});
},
setupAlbum=函数（滑块）{
变量t=“”，
j=0，albms=[]，拇指=[]；
$overlay=$（''）
.prependTo（滑块$window）
.on（'click'，function（）{$album.hide（）；}）；
$。每个（相册、功能（i、v）{
j=0；
albms.push（i）；//保存相册名称
$。每个（v，函数（i，a）{
//仅为拇指获取相册的第一张图像
如果（j++==0）{thumbs.push（a）；}
});
});
j=0；
$。每个（相册、功能（i、v）{
t+=''+albms[j++]+''；
});
$album=$（t+“”）.prependTo（滑块.$window）；
$album.find（'.album thumbs'）。在（'click'，function（）上{
currentAlbum=albms[$（this）.attr（'data-index'）；
设置滑块（currentAlbum）；
返回false；
});
},
setupSlider=函数（相册）{
var img，t=''；
$.each（相册[相册]，函数（i，v）{
t+=''；
});
$overlay.hide（）；
$album.hide（）；
$slider
.html（t）
//更新AnythingSlider
.anythingSlider（）；
//回到第一张幻灯片
$slider.data（'AnythingSlider'）.gotoPage（1，false，null，-1）；
};
//设置任意滑块
sliderOptions.onInitialized=函数（e，滑块）{
showAlbum（滑块）；
设置相册（滑块）；
};
sliderOptions.onSlideInit=函数（e，滑块）{
$overlay.hide（）；
$album.hide（）；
};
sliderOptions.navigationFormatter=函数（i，面板）{
返回面板.attr（'data-title'）；
};
$slider.anythingSlider（sliderOptions）；
设置滑块（currentAlbum）；
});   //结束文件准备就绪

---

谢谢你的指点

找到了错误，很简单

您应该

currentAlbum=“Airports 1”

而不是

currentAlbum=“Airports 1”

通过查看控制台，发现有一个javascript错误，只需查看调用堆栈，就很容易了

但这并不是那么容易，因为之前我必须设置所有脚本和外部引用，这是你应该做的。如果你这么做了，你可能会像我一样很容易发现错误

小提琴正在工作：
图片在哪里？将它们添加到您的样本中。你可以使用我刚刚更改的链接…抱歉，它们保存在我的机器上。由于某种原因，fiddle不会显示它，但FF没有问题。很好的捕捉，但是你有任何关于验证的指针吗。除非您选择出发城市和日期，以及返回城市和日期，否则该表单不会提交。我删除了验证部分，因此不必添加更多资源。不要从原始代码中删除它。
$(function() {
$('#tabs').tabs();

$('#rt_depart_date').datepicker();

$('#rt_return_date').datepicker();

$('#ow_depart_date').datepicker();

$('#travel').validate({
    rules: {
     rt_departure_city: {
        required: true,        
      },
     rt_arrival_city: {
        required: true,         
     }, 
     rt_depart_date: {
        required: true,         
     },
     rt_return_date: {
        required: true,         
     },    
   }, //end rules
messages: {
     rt_departure_city: {
        required: 'Required field.',        
     },
     rt_arrival_city: {
         required: "Required field.",
     },      
     rt_depart_date: {
        required: 'Required field.',        
     },
     rt_return_date: {
        required: 'Required field.',        
     },

   }//end messages

}); // end validate

});



$(document).ready(function() {

var currentAlbum = "Airports",
albums = {
    "Airports 1": {
        "Pic 1" : "images/14.jpg",
        "Pic 2"  : "images/airport-coworking.jpg",
        "Pic 3"   : "images/airports-homepage.jpg"
    },
    "Airports 2": {
        "Pic 4"  : "images/chania-airport.jpg",
        "Pic 5"   : "images/Mumbai_Airport.jpg",
        "Pic 6" : "images/Washington.jpg"
    },

},
$slider = $('#slider'),
sliderOptions = {
    autoPlay : true,
},
icon = '≡', // album icon
$album, $overlay,
showAlbum = function(slider){
    var $icon = $('<span class="icon">' + icon + '</span>');
    slider.$window
        .prepend($icon)
        .on('mouseenter mouseleave', function(e){
            $icon.toggle(e.type === 'mouseenter');
        })
        .on('click', function(){
            $album.show();
            $overlay.show();
        });
},
setupAlbum = function(slider){
    var t = '<div class="album-list">',
    j = 0, albms = [], thumbs = [];
    $overlay = $('<div class="overlay"></div>')
        .prependTo(slider.$window)
        .on('click', function(){ $album.hide(); });
    $.each(albums, function(i, v){
        j = 0;
        albms.push(i); // save album name
        $.each(v, function(i, a){
            // only get the first image of the album for the thumb 
            if (j++ === 0) { thumbs.push(a); }
        });
    });
    j = 0;
    $.each(albums, function(i, v){
        t += '<div class="album-thumbs" data-index="' + j + '"><img src="' + thumbs[j] + '"><span>' + albms[j++] + '</span></div>';
    });
    $album = $(t + '</div>').prependTo(slider.$window);
    $album.find('.album-thumbs').on('click', function(){
        currentAlbum = albms[ $(this).attr('data-index') ];
        setupSlider(currentAlbum);
        return false;
    });
},
setupSlider = function (album) {
    var img, t = '';
    $.each(albums[album], function (i, v) {
        t += '<img data-title="' + i + '" src="' + v + '">';
    });
    $overlay.hide();
    $album.hide();
    $slider
        .html(t)
        // update AnythingSlider
        .anythingSlider();
    // go back to the first slide
    $slider.data('AnythingSlider').gotoPage(1, false, null, -1);
};
// set up AnythingSlider
sliderOptions.onInitialized = function(e, slider){
    showAlbum(slider);
    setupAlbum(slider);
};
sliderOptions.onSlideInit = function(e, slider){
    $overlay.hide();
    $album.hide();
};
sliderOptions.navigationFormatter = function(i, panel){
    return panel.attr('data-title');
};
$slider.anythingSlider(sliderOptions);
setupSlider(currentAlbum);   

});   //end doc ready