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

Question

我将有大约10个字段集，并且我希望每个字段集都取决于“建筑物数量”滑块的值。

我该怎么做呢？

这是我到目前为止的内容：

http://jsfiddle.net/wvVmT/1061/

HTML：

 <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>

JQuery的：

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

        }

        });

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

Answer 1

Simon，实现这样的过滤器并不难，但是您问对了，因为将所有内容放在一起可能存在许多细微的问题。

首先，如果需要预定义的相同类型的元素列表，请确保在标记中具有所需的唯一标识符-用于标签，元素等的唯一标识符-否则将无效。

我建议您将可折叠对象放入可折叠对象集中，您最终将获得适合整个团队的良好的JQM样式。 然后，通过将类.ui-screen-hidden到不需要的可折叠子.ui-screen-hidden来完成过滤。 之后，只需调用$("selector").collapsibleset("refresh");

工作示例：

 $(document).on("pagecreate", "#page-one", function() { $("#buildings .ui-collapsible").each(function(index) { $(this).addClass("ui-screen-hidden"); }); $("#NoBslider").on("change", function() { var val = $(this).val(); $("#buildings .ui-collapsible").each(function(index) { $(this).toggleClass("ui-screen-hidden", index >= val); }); $("#buildings").collapsibleset("refresh"); }); }); 

 .ui-slider input { display: none !important; } .ui-slider .ui-slider-track { margin-left: 20px !important; } 

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> </head> <body> <div data-role="page" id="page-one"> <div data-role="header"> <h4>Please choose...</h4> </div> <div data-role="main" class="ui-content"> <div class="ui-grid-a"> <div class="ui-block-a"> <div class="ui-bar ui-bar-a"> Nr. of Buildings </div> <input type="range" name="NoBslider" id="NoBslider" data-popup-enabled="true" value="0" min="0" max="10"> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-a"> Nr. of Bulk Meters </div> <input type="range" name="points" id="points" data-popup-enabled="true" value="0" min="0" max="100"> </div> </div> <div data-role="collapsible-set" id="buildings"> <fieldset data-role="collapsible"> <legend>Building 1</legend> <fieldset><input type="text" placeholder="Street Name"></fieldset> </fieldset> <fieldset data-role="collapsible"> <legend>Building 2</legend> <fieldset><input type="text" placeholder="Street Name"></fieldset> </fieldset> <fieldset data-role="collapsible"> <legend>Building 3</legend> <fieldset><input type="text" placeholder="Street Name"></fieldset> </fieldset> <fieldset data-role="collapsible"> <legend>Building 4</legend> <fieldset><input type="text" placeholder="Street Name"></fieldset> </fieldset> <fieldset data-role="collapsible"> <legend>Building 5</legend> <fieldset><input type="text" placeholder="Street Name"></fieldset> </fieldset> <fieldset data-role="collapsible"> <legend>Building 6</legend> <fieldset><input type="text" placeholder="Street Name"></fieldset> </fieldset> <fieldset data-role="collapsible"> <legend>Building 7</legend> <fieldset><input type="text" placeholder="Street Name"></fieldset> </fieldset> <fieldset data-role="collapsible"> <legend>Building 8</legend> <fieldset><input type="text" placeholder="Street Name"></fieldset> </fieldset> <fieldset data-role="collapsible"> <legend>Building 9</legend> <fieldset><input type="text" placeholder="Street Name"></fieldset> </fieldset> <fieldset data-role="collapsible"> <legend>Building 10</legend> <fieldset><input type="text" placeholder="Street Name"></fieldset> </fieldset> </div> </div> </div> </body> </html> 

请注意，当JQM引发onpagecreate事件时，滑块的onchange事件处理程序也应附加到所需的元素上。