javascript - 根据 slider 值显示和隐藏元素

Question

我正在尝试制作一个 slider ，以在移动 slider (ui.value)时显示和隐藏元素。

首先，我使用 jquery 创建元素(复选框):

var start = 1;

$(new Array(30)).each(function () {

    $('#showChck').prepend(
        $('<input/>', {type:"checkbox", name:"checkbox-" + start, id:"checkbox-" + start, class:"custom", style:"display:none;", title: "Cambiar los canales que tendrá la linea: " + start}),
        $('<label/>', {for: 'checkbox-' + start, id:"label-" + start, style:"display:none;"}).text(start)
    );

    start++;
});

现在我有 30 个复选框，它们被隐藏了。我想根据 slider 值显示和隐藏它们:

$("#slider").slider({
    min: 1,
    max: 30,
    value: 1,

    slide: function( event, ui ) {
        $( "#result" ).html( ui.value );

        var startx = 1;

        $(new Array(ui.value)).each(function () {
            // Get elements ID
            var checkbox = $("#checkbox-" + startx);
            var label = $("#label-" + startx);
            //var slider = $("#slider-" + startx);

            if (1 == 1) {
                if ($(checkbox).is(":checked")) {
                    //$(checkbox).attr("checked", false);
                    //slider.show();
                }
                checkbox.show();
                label.show();
            }
            else {
                if ($(checkbox).is(":checked")) {
                    //$(checkbox).attr("checked", false);
                    //slider.hide();
                }
                checkbox.hide();
                label.hide();
            }

            startx++;
        });
    }
});

Answer 1

你会发现它更简单:

• 嵌套 <input> <label> 内的元素元素。这样，您只需要显示/隐藏标签，它们各自的输入就会自动显示/隐藏。
• 通过过滤 jQuery 集合而不是显式循环来选择要显示/隐藏的相关标签。正如 jQuery 网站所说，“少写，多做”。

JavaScript 将是这样的:

$(document).ready(function() {
    var N = 30,
        initVal = 5;

    for (var i = 1; i <= N; i++) {
        $('<label/>', {
            id: "label-" + i
        }).append($('<input/>', {
            type: "checkbox",
            name: "checkbox-" + i,
            class: "custom",
            title: "Cambiar los canales que tendrá la linea: " + i
        })).append(i).prependTo("#showChck");
    }

    $("#slider").slider({
        min: 0,
        max: N,
        value: initVal,
        slide: function(event, ui) {
            $("#result").html(ui.value);
            $("#showChck label").show().filter(":lt(" + (N-ui.value) + ")").hide();
        }
    }).slider('option', 'slide')(null, { value: initVal });
});

最后一行是 jQuery UI 的繁琐语法，用于触发初始值的“slide”事件。如果你不需要这个功能，那就删除它或者直接设置 initVal到 0。

<强> DEMO