我在jQuery UI 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
答案 0 :(得分:2)
假设将所有图像放在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();
}
}
});
这样做的是跟踪号码可见vs滑块值....如果它们不匹配则隐藏全部并显示匹配滑块的那些。
如果你有一个很大的数字......应该升级到跟踪滑块的方向,只修改受影响的图像以提高性能
答案 1 :(得分:1)
首先更改图像名称以匹配值。例如,1.png
,2.png
。然后你可以:
var i, maxVal = ui.value, html='';
for (i = 1; i <= maxVal; i += 1) {
html += '<img src="img/' + i + '.png';
}
$('#divOne').html(html);
编辑:但一般来说,更好的方法是将所有图像放在容器中,然后构造一个样式表,将匹配值的类映射到适当的状态。 E.g:
<div class="score[X]"> <!-- where `[X]` will be the actual value of the ui.value -->
<img class="val1" src="1.png">
<img class="val2" src="2.png">
<img class="val3" src="3.png">
</div>
在css中:
.score1 .val2 { display: none; }
.score1 .val3 { display: none; }
....
或上述其他一些变体。
编辑:
CSS的示例略有不同:http://jsfiddle.net/gwQAW/
EDIT2:
带有HTML5滑块的版本:http://jsfiddle.net/gwQAW/2/(抱歉,现在没时间使用jQuery UI)