jquery - jQuery滑块：根据滑块值克隆和删除元素

Question

就像标题说的那样...

我正在尝试根据滑块值找到复制/克隆 div 的最佳方法；相反，当滑块值减小时，我也尝试删除添加的元素。实际上，滑块值应始终反映所显示的克隆元素的数量（彼此堆叠）。最初，将显示 0 个元素。

例如

要克隆的元素：

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

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

在里面：

    max: 20,
    value: 0,

提前致谢！

Answer 1

您可以使用滑块的停止事件来计算您需要添加或删除多少个 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);
        }
    });

});​