Javascript 单击不显示元素的函数

我需要在选中复选框时显示元素，在未选中复选框时隐藏它们

for (var id = 1; id <= N; id++) {
    var $newSlider = $("<div/>", {
        id: 'slider-' + id,
        class: 'ui-slider'
    }).slider({
        range: 'min',
        min: initVal,
        max: N,
        value: initVal,
        step: 2,
        slide: function( event, ui) {
            $newResult.val( ui.value );
        }
    });
    var $newResult = $('<input/>', {
        type: 'text',
        id: 'result-' + id,
        class: 'sliderText',
        value: '4'
    });
    var $x = $("<div/>", {
        id: 'sliderContainer-' + id
    }).append($newResult).append($newSlider);
    $("#showSldr").append($x);
}

问题一定是我没注意到的

事实上，滑块（每个）最初是在第一次选中复选框时创建的：

---

但我更喜欢创建它们，只显示/隐藏它们，这样无论您先选中哪个复选框，它们都将按顺序排列（从1到30）：

我不明白。first fiddle链接似乎有效否？是的，第一次选中复选框时，fiddle会创建一个滑块（它们有相同的数字），然后隐藏并显示它。我想立即创建它们（如复选框），然后只使用show_hide_sliders（）函数。这可能只是show函数中缺少的连字符吗$（“#sliderContainer-”+id）.show（）；那样的错误令人尴尬。非常感谢。

$("body").on("click", "#showChck input", function() {
    show_hide_sliders();
});

function show_hide_sliders() {
    $("#showSldr>div").hide();
    $("#showChck input").filter(":checked").filter(":visible").each(function() {
        var id = this.id.replace(/\D/g, '');
        $('#sliderContainer' + id).show();
    });
}