Ausblenden/Einblenden mit Klasse funktioniert nicht

Question

Ich versuche hier, divs basierend auf dem aus einem Dropdown-Menü ausgewählten Wert ein-/auszublenden.

Hier ist die Sache.

Dropdown-Liste eine Reihe von Klassenräumen.

Es gibt ein Elternteil div mit dem Namen listUserGrid, das untergeordnete divs hat. Jedes Kind div repräsentiert einen Schüler. Wenn also eine bestimmte Klasse ausgewählt wird, versuche ich nur die Schüler zu zeigen, die ihr angehören.

Die Beziehung zwischen einem Schüler und einer Klasse ist durch den Namen der Klasse, die als ein Klassenelement angegeben ist. Schüler der Klasse 2019 haben also eine Klasseneigenschaft mit dem Namen c209 und so weiter.

Ich bin in der Lage, die Klasse zu holen, aber das Verstecken funktioniert nicht.

<section class="content"> 

    <select id="class" name="class" data-placeholder="Select A Class"> 
    <option value="">-- All Class --</option> 
    <option value="209">Class 209</option> 
    <option value="210">Class 210</option> 
    <option value="211">Class 211</option> 
    <option value="212">Class 212</option> 
    <option value="213">Class 213</option> 
    <option value="214">Class 214</option> 
    </select> 

    <div id="listUserGrid" class="row"> 
    <div class="c209">user a</div> 
    <div class="c210">user b</div> 
    <div class="c211">user c</div> 
    <div class="c212">user d</div> 
    <div class="c213">user e</div> 
    <div class="c214">user f</div> 
    <div class="c209">user g</div> 
    <div class="c210">user h</div> 
    <div class="c211">user i</div> 
    <div class="c212">user j</div> 
    <div class="c213">user k</div> 
    <div class="c214">user l</div> 
    </div> 
</section> 

jQuery

$(document).ready(function() { 
    $('#class').on('change', function() { 
    var selected = this.value; 
    if (selected) { 
     var selClass = 'c' + selected; 
     console.log(selClass); 
     $('#listUserGrid :not(.selClass)').addClass('hide'); 
    } else { 
     $('#listUserGrid').children().show(); 
    } 

    }); 
}); 

FIDDLE

Answer 1

$(document).ready(function() { 
 
    $('#class').on('change', function() { 
 
    var selected = this.value; 
 
    if (selected) { 
 
     var selClass = 'c' + selected; 
 
     console.log(selClass); 
 
     $('#listUserGrid :not(.'+selClass+')').addClass('hide'); 
 
    } else { 
 
     $('#listUserGrid').children().show(); 
 
    } 
 

 
    }); 
 
})

.hide{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="content"> 
 

 
    <select id="class" name="class" data-placeholder="Select A Class"> 
 
    <option value="">-- All Class --</option> 
 
    <option value="209">Class 209</option> 
 
    <option value="210">Class 210</option> 
 
    <option value="211">Class 211</option> 
 
    <option value="212">Class 212</option> 
 
    <option value="213">Class 213</option> 
 
    <option value="214">Class 214</option> 
 
    </select> 
 

 
    <div id="listUserGrid" class="row"> 
 
    <div class="c209">user a</div> 
 
    <div class="c210">user b</div> 
 
    <div class="c211">user c</div> 
 
    <div class="c212">user d</div> 
 
    <div class="c213">user e</div> 
 
    <div class="c214">user f</div> 
 
    <div class="c209">user g</div> 
 
    <div class="c210">user h</div> 
 
    <div class="c211">user i</div> 
 
    <div class="c212">user j</div> 
 
    <div class="c213">user k</div> 
 
    <div class="c214">user l</div> 
 
    </div> 
 
</section>

Concat Ihre Wähler richtig

Answer 2

Updated fiddle.

Probleme:

1. Wenn Sie Klasse hinzufügen hide führen Sie dann die .show() es die Klasse nicht entfernen wird so das Element nicht angezeigt wird.

2. selClass ist eine Variable, so dass Sie nicht einfach in :not(.selClass) als String nennen können, aber Sie haben die Variable mit Selektor wie $('#listUserGrid :not(.'+selClass+')') verketten.

3. Sie sollten die anderen Schüler zeigen, bevor Sie diejenigen verstecken, die nicht übereinstimmen.

vorgeschlagene Lösung:

Verwenden show/hide statt Klasse mit hide:

if (selected) { 
    var selClass = 'c' + selected; 

    $('#listUserGrid div').show(); 
    $('#listUserGrid :not(.'+selClass+')').hide(); 
} else { 
    $('#listUserGrid div').show(); 
} 

Hoffnung, das hilft.

$(document).ready(function() { 
 
    $('#class').on('change', function() { 
 
    var selected = this.value; 
 

 
    if (selected) { 
 
     var selClass = 'c' + selected; 
 

 
     $('#listUserGrid div').show(); 
 
     $('#listUserGrid :not(.'+selClass+')').hide(); 
 
    } else { 
 
     $('#listUserGrid div').show(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="content"> 
 

 
    <select id="class" class="" name="class" data-placeholder="-- Select A Class* --"> 
 
    <option value="">-- All Class --</option> 
 
    <option value="209">Class 209</option> 
 
    <option value="210">Class 210</option> 
 
    <option value="211">Class 211</option> 
 
    <option value="212">Class 212</option> 
 
    <option value="213">Class 213</option> 
 
    <option value="214">Class 214</option> 
 
    </select> 
 

 
    <div id="listUserGrid" class="row"> 
 
    <div class="c209">user a</div> 
 
    <div class="c210">user b</div> 
 
    <div class="c211">user c</div> 
 
    <div class="c212">user d</div> 
 
    <div class="c213">user e</div> 
 
    <div class="c214">user f</div> 
 
    <div class="c209">user g</div> 
 
    <div class="c210">user h</div> 
 
    <div class="c211">user i</div> 
 
    <div class="c212">user j</div> 
 
    <div class="c213">user k</div> 
 
    <div class="c214">user l</div> 
 
    </div> 
 
</section>

Answer 3

Der Wähler ist falsch bezeichnet.

$(document).ready(function() { 
    $('#class').on('change', function() { 
    // Display all the children before hiding them 
    $('#listUserGrid').children().show(); 
    var selected = this.value; 
    if (selected) { 
     var selClass = 'c' + selected; 
     console.log(selClass); 
     $('#listUserGrid :not(.' + selClass + ')').hide(); 
    } 
    }); 
});