在上计数和下计数时追加和删除元素

append and remove elements on upcount and downcount

本文关键字：删除 元素 追加      更新时间：2023-09-26

我有一个关于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 语句中的值是错误的。

你们中有人有提示吗？干杯

编辑：我制作了一个图像来显示我想做什么点击

假设将所有图像放在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();
            }
       }
});

这样做是轨道编号可见与滑块值。如果它们不匹配，它将隐藏所有内容并显示与滑块匹配的滑块。

如果你有大量的数字...这应该升级为跟踪滑块的方向，并且仅修改受影响的图像以提高性能

首先更改映像名称以匹配值。 例如，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);

编辑：但一般来说，更好的方法是将所有图像放在容器中，然后构造一个样式表，该样式表将与值匹配的类映射到适当的状态。 例如：

<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/

编辑2：

带有HTML5滑块的版本：http://jsfiddle.net/gwQAW/2/（抱歉，现在没有时间使用jQuery UI）

相关文章：