javascript - 隐藏/显示使用类不起作用

Question

我在这里要做的是根据从下拉列表中选择的值隐藏/显示 div。

事情是这样的。

下拉列表列出了一组教室。

有一个名为 listUserGrid 的父 div，它有子 div。每个子 div 代表一个学生。 So, when a particular class is selected, I am trying to show only those students who belong to it.

学生和类(class)之间的关系是通过指定为类(class)元素的类(class)名称来实现的。因此，属于 2019 级的学生将拥有名为 c209 的类(class)属性，依此类推。

我能够获取类，但隐藏不起作用。

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

正确连接你的选择器