Question

我有 2个按钮具有相同的功能，即从API获取数据然后转换为html然后使用jQuery将其附加到<div>。最后，使用slick jQuery插件将其显示为滑块。

然而，点击第一个按钮后，如果我点击第二个按钮（反之亦然）， 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();
                }
            }
    });
}

有人有解决方案吗？

Answer 1

这是工作代码

测试了光滑的版本1.8.1

$('#slick-slider').slick('refresh');

Answer 2

以下代码适用于我

->add('attachPictures', FileType::class, ['multiple'=>true, 'required'=>false])

如何重新加载光滑（滑块/轮播）jQuery插件？

2 个答案: