jQuery - hide & show li-Elemente, die eine variable der Klasse

Ich habe ein drop-down-Menü als ungeordnete Liste. Wenn eine Kategorie ausgewählt ist, ich will nur das li mit der gleichen Klasse wie der Wert der Auswahl sichtbar bleiben.

Habe ich versucht, mit der not selector aber ich habe Schwierigkeiten, es zu benutzen in Kombination mit einer Variablen der Klasse - das ist auch der gleiche wie der Wert der Auswahl.

$(document).ready(function(){
    var chosenCat = $('select[name="mapCat"]').val();
    var className = $('#mapContent ul li.');
    $("#mapContent ul li").not("'.' +chosenCat").addClass("displayNone");   
});

Hab ich schon editiert aber das jQuery-snippet funktioniert nicht. Wie kann ich richtig schreiben, die variable I soll sichtbar bleiben? Oder ist der Fehler in der val() ich bin ziehen?

HTML:

<select name="mapCat">
    <option value="opt0" selected="selected">SELECT A CATEGORY</option>
    <option value="opt1">UNIVERSITIES</option>
    <option value="opt2">HOSPITALS</option>
</select>
<div id="mapContent">
    <ul>
       <li class="opt1">University X</li>
       <li class="opt2">Hospital X</li>
       <li class="opt2">Hospital Y</li>
       <li class="opt1">University Y</li>
       <li class="opt1">University Z</li>
       <li class="opt2">Hospital Z</li>
    </ul>
</div>

CSS-snippet:

.displayNone {
   display: none;
 }

InformationsquelleAutor colleen | 2014-02-25

  1. 3

    versuchen Sie den folgenden code 

    $( document ).ready(function() {        
         $('select[name="mapCat"]').change(function(){
            var chosenCat =$(this).val();       
            $('#mapContent ul li').hide();
            $('#mapContent ul li.'+chosenCat).show();
         });
        });
    perfekt - funktioniert wie ein Charme.

    InformationsquelleAutor Sarath

  2. 2

    Brauchen Sie nicht die doppelte quotes im not() Selektor als Sie zu den variable so behandelt werden, als string.

    $("#mapContent ul li").not('.' + chosenCat).addClass("displayNone");

    Den code, den Sie haben, wird pass '.' +chosenCat im nicht-Wahlschalter anstatt die .opt0 oder .opt1 etc. je nach Auswahl.

    Auch Sie wahrscheinlich brauchen, um es zu tun auf change-Ereignis des wählen, auch wenn Sie nur wollen, um ein-und ausblenden, die Sie verwenden können, das ein-und ausblenden-Funktion.

    Live-Demo

    $('select[name="mapCat"]').change(function(){
     var chosenCat = $(this).val();  
     $("#mapContent ul li").show()
     $("#mapContent ul li").not('.' + chosenCat).hide();   
});
    tolle Beratung. vielen Dank für die demo. natürlich, ich bin neu Abfragen - ich brauchen, vertraut zu machen mich mit mehr Funktionen.

    InformationsquelleAutor Adil

Schreibe einen Kommentar