jQuery滑块：克隆和删除基于滑块值的元素

我试图找到最好的方式来复制/克隆基于滑块值的div;相反，我也试图删除滑块值减少时添加的元素。实际上，滑块值应始终反映显示的克隆元素的数量（堆叠在一起）。最初，将显示0个元素。

例如被克隆

元素：

<div class="test" style="display: none">test</div>

滑块： http://jqueryui.com/demos/slider/#slider-vertical

初始化：提前

max: 20, 
    value: 0,

谢谢！

来源

2012-06-11 Dennis

说实话，我是新来的jQuery，我还没有决定最佳路径开始...我能想出的最好是使用功能的方法像这样[链接]（http://jqueryminute.com/duplicate-and-clone-elements-multiple-times/），但我真正挂断的地方是当删除。我想如果提到我想在滑动事件中预制这个函数也会有所帮助。 – Dennis

您可以使用滑块的停止事件来计算需要添加或删除多少个div。我只是增加和减少div元素，但你也可以很容易地克隆。

演示：http://jsfiddle.net/lucuma/ggC8s/

$(function() { 
    $("#slider-vertical").slider({ 
     orientation: "vertical", 
     range: "min", 
     min: 0, 
     max: 100, 
     value: 0, 
     stop: function(event, ui) { 
      $("#amount").val(ui.value); 
      var diff = ui.value - $('#content div').length; 
      if (ui.value == 0) { 
       $('#content div').remove(); 
      } else if (diff < 0) { 
       $('#content div:gt(' + ($('#content div').length + diff - 1) + ')').remove(); 
      } else { 
       var i = diff; 
       while (i--) { 
        $('#content').append('<div>div</div>'); 
       } 
      } 
     }, 
     slide: function(event, ui) { 
      $("#amount").val(ui.value); 
     } 
    }); 

});

正如你可以删除所有的div和再生他们，而不是计算增量的替代。

演示：http://jsfiddle.net/lucuma/ggC8s/3/

$(function() { 
    $("#slider-vertical").slider({ 
     orientation: "vertical", 
     range: "min", 
     min: 0, 
     max: 100, 
     value: 0, 
     stop: function(event, ui) { 

      var diff = ui.value; 
      $('#content div').remove(); 
      while (diff--) { 
       $('#content').append('<div>div</div>'); 
      } 
     }, 
     slide: function(event, ui) { 
      $("#amount").val(ui.value); 
     } 
    }); 

});

来源

2012-06-11 23:01:20 lucuma

我觉得'.clone（）'在那里丢失了。另外，备用jsFfiddle可能会丢失任何附加事件。但对于固体方法来说，这仍然是+1。 – arttronics

这些都太棒了，它看起来像要么会为我的情况。一种方法与另一种方法有争论吗？第二个看起来更简单，但看起来可以欺骗新手。最初，我不确定使用的方法;克隆似乎是正确的选择，但我很高兴看到解决问题的另一种方法。非常感谢！ – Dennis

@arttronics你是对的我没有彻底使用一个克隆，但这是很平凡的..这里是一个克隆只是为了得到它的jsfiddle：http://jsfiddle.net/lucuma/ggC8s/4/唯一的区别是我用css来隐藏它而不是内联的css，所以当我克隆它时，我不必更改css。 – lucuma

jQuery滑块：克隆和删除基于滑块值的元素

回答

相关问题