使用JQuery Mobile Sliders顯示/隱藏Fieldset

我將擁有大約10個fieldset，並且我希望每個顯示都取決於Number of Buildings滑塊的值。使用JQuery Mobile Sliders顯示/隱藏Fieldset

我該怎麼做？

這是我到目前爲止有：

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(); 

     } 

     });

誠徵只是測試，看看我能得到fieldsets來顯示我的滑塊值是否爲2.它當然不工作。

來源

2017-03-02 Simon Yo

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>

請說明還滑塊onchange事件處理程序將被連接到所需的元素，當JQM引發onpagecreate事件。

來源

2017-03-08 13:08:17 deblocker

使用JQuery Mobile Sliders顯示/隱藏Fieldset

回答

相關問題