Javascript 使用JQuery移动滑块显示/隐藏字段集

我将有大约10个字段集，我希望每个字段集都根据建筑物数滑块的值来显示

我该怎么做

这就是我到目前为止所做的：

HTML:

---

我只是想测试一下，看看是否可以让字段集显示滑块是否在值2上。当然，它不起作用。

西蒙，这样的过滤器不难实现，但你问得对，因为把所有的东西放在一起可能会有很多微妙的问题

首先，如果您需要相同类型的元素的预定义列表，请确保您的标记中有唯一的标识符-用于标签、元素等，这是您所需要的-否则什么都不起作用

我建议您，将可折叠文件放在一个可折叠文件集中，您将为整个团队提供一个很好的JQM风格。然后，通过将类

.ui screen hidden

添加到不需要的可折叠集子项，完成筛选。之后，只需调用

$（“选择器”）.collapsableset（“刷新”）

工作示例：


$（document）.on（“pagecreate”，“第1页”，函数（）{
$（“#buildings.ui可折叠”）。每个（功能（索引）{
$（this.addClass（“ui屏幕隐藏”）；
});
$（“#nobslaider”）。关于（“更改”，函数（）{
var val=$（this.val（）；
$（“#buildings.ui可折叠”）。每个（功能（索引）{
$（this）.toggleClass（“ui屏幕隐藏”，索引>=val）；
});
$（“#建筑物”）。可折叠集（“刷新”）；
});
});
.ui滑块输入{
显示：无！重要；
}
.ui滑块.ui滑块轨迹{
左边距：20px！重要；
}

请选择。。。
建筑物数目
体积流量计数量
1号楼
2号楼
3号楼
4号楼
5号楼
6号楼
7号楼
8号楼
9号楼
10号楼

 <div class="input-group">
                            <div class="col-half">
                                <h4>Number of Buildings</h4>
                                <input type="range" name="NoBslider" id="NoBslider" data-popup-enabled="true" value="0" min="0" max="10">
                            </div>
                            <div class="col-half">
                                <h4>Number of Bulk Meters</h4>
                                <input type="range" name="points" id="points" data-popup-enabled="true" value="0" min="0" max="100">
                            </div>
                        </div>
                        <fieldset data-role="collapsible" class="building">
                            <legend>Building 1</legend>
                            <label for="maila">Building Street</label>
                            <div class="input-group">
                                <div class="col-half">
                                    <div class="input-group-icon">
                                        <div class="col-third">
                                            <input type="text" placeholder="Street Number" name="maila" />
                                        </div>
                                        <div class="input-icon"><i class="fa fa-info-circle" style="padding-top:20px"></i></div>
                                    </div>
                                    <div class="col-third">
                                        <input type="text" placeholder="Street Name" name="maila" />
                                    </div>
                                    <div class="col-third">
                                        <input type="text" placeholder="Street Type" name="maila" />
                                    </div>
                                </div>
                            </div>
                            <div class="input-group">
                                <div class="col-third">
                                    <div class="input-group input-group-icon">

                                        <input type="text" placeholder="Number of Residential Units" name="comments" />
                                        <div class="input-icon"><i class="fa fa-file-text" style="padding-top:20px"></i></div>
                                    </div>
                                </div>
                                <div class="col-third">
                                    <div class="input-group input-group-icon">

                                        <input type="text" placeholder="Number of Commercial Units" name="comments" />
                                        <div class="input-icon"><i class="fa fa-file-text" style="padding-top:20px"></i></div>
                                    </div>
                                </div>
                                <div class="col-third">
                                    <div class="input-group input-group-icon">
                                        <input type="text" placeholder="Number of Commons" name="comments" />
                                        <div class="input-icon"><i class="fa fa-file-text" style="padding-top:20px"></i></div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset data-role="collapsible" class="building">
                            <legend>Building 2</legend>
                            <label for="maila">Building Street</label>
                            <div class="input-group">
                                <div class="col-half">
                                    <div class="input-group-icon">
                                        <div class="col-third">
                                            <input type="text" placeholder="Street Number" name="maila" />
                                        </div>
                                        <div class="input-icon"><i class="fa fa-info-circle" style="padding-top:20px"></i></div>
                                    </div>
                                    <div class="col-third">
                                        <input type="text" placeholder="Street Name" name="maila" />
                                    </div>
                                    <div class="col-third">
                                        <input type="text" placeholder="Street Type" name="maila" />
                                    </div>
                                </div>
                            </div>
                            <div class="input-group">
                                <div class="col-third">
                                    <div class="input-group input-group-icon">

                                        <input type="text" placeholder="Number of Residential Units" name="comments" />
                                        <div class="input-icon"><i class="fa fa-file-text" style="padding-top:20px"></i></div>
                                    </div>
                                </div>
                                <div class="col-third">
                                    <div class="input-group input-group-icon">

                                        <input type="text" placeholder="Number of Commercial Units" name="comments" />
                                        <div class="input-icon"><i class="fa fa-file-text" style="padding-top:20px"></i></div>
                                    </div>
                                </div>
                                <div class="col-third">
                                    <div class="input-group input-group-icon">
                                        <input type="text" placeholder="Number of Commons" name="comments" />
                                        <div class="input-icon"><i class="fa fa-file-text" style="padding-top:20px"></i></div>
                                    </div>
                                </div>
                            </div>

                        </fieldset>

    hidebuildings($("#NoBslider"));
    $("#NoBslider").on("change", function () {
        hidebuildings($(this));
    });
    function hidebuildings(slider) {
        var theVal = slider.val();
                        if (theVal = 2){
            $('.building').show();
            $('.building1').show();

        }

        });