Question

我试图在移动滑块（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({
    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

根据滑块值显示和隐藏元素

1 个答案: