使用 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 添加到不需要的 collapsibleset 子项来完成过滤器。之后，只需调用$("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 事件处理程序应附加到所需的元素。