Zeige/Verberge Fieldset mit JQuery Mobile Sliders

Question

Ich werde etwa 10 Feldsets haben, und ich möchte, dass jedes Feld abhängig von dem Wert des Anzahl der Gebäude Schieberegler angezeigt wird.

Wie mache ich das?

Das ist, was ich bisher habe:

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

     } 

     }); 

wollte nur testen und sehen, ob ich die bekommen könnte Fieldsets um anzuzeigen, ob ich den Schieberegler auf Wert 2 hatte. Es funktioniert natürlich nicht.

Answer 1

Simon, solch ein Filter ist nicht schwer zu implementieren, aber Sie haben Recht, zu fragen, weil es viele subtile Probleme geben könnte, indem Sie alle Dinge zusammenfügen.

Zuerst, wenn Sie eine vordefinierte Liste von Elementen des gleichen Typs benötigen, stellen Sie sicher, dass Sie in Ihrem Markup eindeutige Bezeichner haben - für Etiketten, Elemente usw., die Sie brauchen - sonst wird nichts funktionieren .

Ich schlage vor, Sie, um die Collapsible in einem zusammenklappbaren Satz zu setzen, werden Sie am Ende mit einem schönen JQM-Stil für die ganze Gruppe enden. Dann wird der Filter durchgeführt, indem die Klasse .ui-screen-hidden zu den unerwünschten kollabierbaren Set-Children hinzugefügt wird. Danach, rufen Sie einfach $("selector").collapsibleset("refresh");

Arbeitsbeispiel:

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

Bitte beachten Sie auch die Event-Handler onchange für den Schieber wird auf das gewünschte Element angebracht werden, wenn JQM die onpagecreate Ereignis auslöst .