我有2按钮和相同的功能,那就是从API获取数据,然后转换成,然后使用jQuery将其附加到<div>
。最后,使用slick 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();
}
}
});
}
有人有解决这个问题的办法吗?
发布于 2017-08-17 19:34:29
下面的代码适用于我
$('.my-slider')[0].slick.refresh()
https://stackoverflow.com/questions/32371003
复制相似问题