CODEWITHSUNDEEP
javascriptjquery
Smokey
Smokey

Reputation: 1897

Hide/Show using class not working

What I'm trying to do here is to hide/show divs based on the value selected from a dropdown.

Here's the thing.

Dropdown lists a set of class rooms.

There is a parent div named listUserGrid which has child divs. Each child div represents a student. So, when a particular class is selected, I am trying to show only those students who belong to it.

Relation between a student and a class is through the name of the class which is specified as a class element. So, students belonging to class 2019 will have a class property named c209 and so on.

I'm able to fetch the class but hiding ain't working.

<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

Upvotes: 2

Views: 1704

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Updated fiddle.

Problems :

  1. When you add class hide then perform the .show() it will not remove the class so the element will not shown.

  2. selClass is a variable so you can't just call it as string in :not(.selClass) but you've to concatenate the variable with selector like $('#listUserGrid :not(.'+selClass+')').

  3. You should shows the other students before hidding those who not match.

Suggested solution :

Use show/hide instead of using class hide :

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

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

Hope this helps.

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

Upvotes: 1

Ejaz
Ejaz

Reputation: 1632

The selector is incorrectly called.

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

Upvotes: 0

guradio
guradio

Reputation: 15555

$(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 your selector properly

Upvotes: 2

Related Questions