1

タイトルが言うように...

スライダーの値に基づいてdivを複製/複製するための最良の方法を見つけようとしています。逆に、スライダーの値を小さくすると、追加された要素も削除しようとしています。事実上、スライダーの値は、表示されている（互いに積み重ねられた）複製された要素の数を常に反映している必要があります。最初は、0個の要素が表示されます。

例えば

複製される要素：

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

スライダー： http： //jqueryui.com/demos/slider/#slider-vertical

初期化：

    max: 20,
    value: 0,

前もって感謝します！

4

1 に答える 1

2

You can use the stop event of the slider to calculate how many divs you need to add or remove. I am just adding and subtracting div elements but you could easily clone as well.

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

});​

As an alternative you could remove all the divs and regenerate them instead of calculating the deltas.

Demo: 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-11T23:01:20.960 に答える