我正在使用闪烁板创建一个jquery滑块,并且滑块的内容必须根据选择列表中选择的值进行排序。 问题是,每当我在选择列表中选择一个条目时,滑块内容会发生变化但会丢失所有css样式。我认为这是因为闪烁板的初始化,但我无法弄清楚如何解决它,请帮忙。
这是我的代码:
<select id="sort" name="sort" onchange="sortSlider()">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>
<div class="flicker-example">
<ul>
<script type='text/javascript'>
window.onload = sortSlider;
var storeid = window.localStorage.getItem('storeid');
function sortSlider() {
$(".flicker-example ul li").remove();
var selection = document.getElementById('sort').value;
/* call the php that has the php array which is json_encoded */
$.getJSON('http://testdb2.weby.biz/deallist.php', function(data) {
/* data will hold the php array as a javascript object */
$.each(data, function(key, val) {
if (val.Store_Id == storeid && val.Product_Type_Name == selection) {
$(".flicker-example ul").append('<li data-background="' + val.Product_Variant_Image + '"><div class="flick-title">' + val.Product_Brand_Name + '</div><div class="flick-sub-text">' + val.Product_Variant_Name + '</div></li>');
}
});
$('.flicker-example').flickerplate({
auto_flick: true,
auto_flick_delay: 8,
flick_animation: 'transform-slide'
});
});
}
</script>
</ul>
</div>