jQuery AnythingSlider与验证

Question

我找到了一个任何滑块的例子，但是当页面加载时，我似乎无法让图片开始。它只在你点击框时开始(你可以看到任何东西滑块在哪里的轮廓)，我也在尝试验证页面上的表单上的一些信息。我的JS没有任何错误，但是没有验证。下面是我的JS，这是指向我的JSFiddle http://jsfiddle.net/jskaggs/PjR2Q/的链接

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

感谢你的指点。

Answer 1

发现了错误，而且很简单。

而不是currentAlbum = "Airports"，您应该使用currentAlbum = "Airports 1"。

发现通过查看控制台，那里有一个javascript错误，只是查看了调用堆栈，这很简单。

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

这是小提琴的工作：http://jsfiddle.net/bortao/vNa2p/