如何重新加载slick(滑块/轮播)jQuery插件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (186)

我有2个具有相同功能的按钮,即从API获取数据然后转换为html然后使用jQuery追加它<div>。最后,使用光滑的 jQuery插件显示它,将HTML元素显示为滑块。但是,单击第一个按钮后,如果我单击第二个按钮(反之亦然),slick不再起作用

Javascript代码:

$(document).ready(function(){

    /*
    Description  : Handle Day Button Event
    */
    $('.dayList').on("click", function(event)
    {
            var dayChild = $(this).attr('id');

            //::refresh day lline
            $('.hour-to-hour-line').empty();    
            getHourList(dayChild,function()
            {

                /* 
                The Slick
                */
                $('.hour-to-hour-line').slick({
                  dots: false,
                  infinite: false,
                  speed: 1000,
                  slidesToShow: 6,
                  slidesToScroll: 1,
                  focusOnSelect: true,
                  arrows: false,
                  slickSetOption: true
                }); 
          });   
    });
});

HTML代码:

<div id="monday" class="dayList" data-daycount = "1" tabindex="1"> Monday </div>
<div id="tuesday" class="dayList" data-daycount = "2" tabindex="2"> Tuesday </div>
<br/>
<div id="hour2" class="hour-to-hour-line"></div>

使用Javascript代码的getHourList()功能:

function getHourList(day,callback)
{
    //::convert day to dayCount
    var dayCount = 0;
    switch(day) {
        case "monday":
            dayCount = 1;
            break;
        case "tuesday":
            dayCount = 2;
            break;      
    }

    //::fetch data from API
    jQuery.ajax({
        type: 'GET',
        url: 'http://localhost/api/1.0/schedule/items?day='+dayCount,
        dataType: 'json',
        beforeSend: function (xhr) {
            xhr.setRequestHeader ("Authorization", "Basic WS8fkn5344WN8==");
        },
            success: function (data) 
            {
                //::refresh <div class='hour-to-hour-list'> template
                $('.hour-to-hour-line').empty();                

                //data definition
                var iCounter_1          = 1;
                var iCounter_2          = 1;
                var iCounter_2_next   = 1;
                var timer = [];

                //::exctract time from array=>data
                jQuery.each( data.item, function( key, val ) 
                {                                   
                    timer[iCounter_1] = val.time;       
                    iCounter_1++;           
                });

                //::exract time from array=>timer
                jQuery.each( data.item, function( key, val ) 
                {                   
                    var time         = val.time;        
                    var parent_id = "hour_"+iCounter_2;
                    var hour_id    = "this_hour_"+iCounter_2;
                    var next         = iCounter_2 + 1;

                    $html = 
                    "<div id="+parent_id+" class='fl hour-focus'>"+
                        "<div id="+hour_id+" class='fl kurohige-prev jaman' data-time="+time+">"+time+"-"+timer[next]+"</div>"+
                        "<div class='fl line-0'></div>"+                    
                    "</div>";

                    $('.hour-to-hour-line').append($($html));       
                    iCounter_2++;       

                });
                if (callback)
                {
                    callback();
                }
            }
    });
}

有人有解决方案吗?

提问于
用户回答回答于

扫码关注云+社区

领取腾讯云代金券