Question

我将有大约10个场地集，我希望每个场景集都根据“建筑物数量”滑块的值显示。

我该怎么做？

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

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

西蒙，这样的过滤器并不难实现，但你提出要求是对的，因为把所有的东西放在一起会有很多微妙的问题。

首先，如果您需要预定义的相同类型的元素列表，请确保您的标记中包含唯一标识符 - 标签，元素等等，这些都是您需要的 - 否则一切都不会起作用。

我建议你，将可折叠设备放在一个可折叠的设备中，你最终会得到一个适合整个团队的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事件处理程序应附加到所需元素。

使用JQuery Mobile Sliders显示/隐藏Fieldset

1 个答案: