我对 jQuery UI Slider
小部件有疑问。我打算做的是,在每个向上计数值上, slider 都会在 div 中附加一个图像:
$("#divOne").slider({
range: "min",
min: 1,
max: 10,
slide: function (event, ui) {
console.log(ui.value);
if(ui.value == 1) {
$('#divOne').append('<img class="linkimg" src="img/link/zwei.png">');
}
if(ui.value == 2) {
$('#divOne').append('<img class="linkimg" src="img/link/drei.png">');
}
if(ui.value == 3) {
$('#divOne').append('<img class="linkimg" src="img/link/eins.png">');
}
},
change: function (event, ui) {
//alert('Stopped at ' + ui.value);
}
});
到目前为止效果很好。
问题是,如果我要向下计数,我想删除元素,但是如果我跨越一个数字,它当然会再次追加,所以我猜比较该 if 语句中的值是错误的。
你们有人有提示吗?干杯
编辑:我制作了一张图片来展示我想做的事情 CLICK
最佳答案
假设将所有图像放置在 html 中
/* cache collection of images*/
var $images= $("#divOne img")
$("#divOne").slider({
slide:function(e,ui){
if( ui.value !== $images.filter(':visible').length){
$images.hide().slice( 0, ui.value).show();
}
}
});
它的作用是可见的轨道编号与 slider 值......如果它们不匹配,它将隐藏所有轨道并显示与 slider 匹配的轨道。
如果您有大量...应升级为跟踪 slider 方向并仅修改受影响的图像以提高性能
关于javascript - 在向上计数和向下计数时添加和删除元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19754815/