Question

就像标题所说......

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

e.g。

要克隆的元素：

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

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

init：

    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);
        }
    });

});

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

1 个答案: