Javascript 使用类隐藏/显示不工作

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

事情是这样的

下拉列表列出了一组教室

有一个名为

listUserGrid

的父div，它有子div。每个子div代表一个学生。所以，当一个特定的类被选中时，我试图只显示那些属于它的学生

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

c209

的类属性，依此类推

我能去上课，但躲起来不行

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

$（文档）.ready（函数（）{
$（'#class'）。在（'change'，function（）上{
所选var=此值；
如果（选定）{
变量selClass='c'+已选择；
console.log（selClass）；
$（'#listUserGrid:not（'+selClass+'））.addClass（'hide'）；
}否则{
$（'#listUserGrid'）.children（）.show（）；
}
});
})

.hide{display:none}

--全班--
209班
210班
211班
第212类
213班
214班
用户a
用户b
用户c
用户d
用户e
用户f
用户g
用户h
用户i
用户j
用户k
用户l

问题：

添加class

hide

时，执行

.show（）

不会删除该类，因此元素不会显示

selClass

是一个变量，因此您不能在

：not（.selClass）

中将其作为字符串调用，而是必须将该变量与选择器连接起来，如

$（'#listUserGrid:not（.+selClass+'））

在隐藏不匹配的学生之前，你应该向其他学生展示

建议的解决方案：

使用

show/hide

而不是使用class

hide

：

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

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

希望这有帮助

$（文档）.ready（函数（）{
$（'#class'）。在（'change'，function（）上{
所选var=此值；
如果（选定）{
变量selClass='c'+已选择；
$（'#listUserGrid div'）.show（）；
$（'#listUserGrid:not（.+selClass+））.hide（）；
}否则{
$（'#listUserGrid div'）.show（）；
}
});
});

--全班--
209班
210班
211班
第212类
213班
214班
用户a
用户b
用户c
用户d
用户e
用户f
用户g
用户h
用户i
用户j
用户k
用户l
选择器调用不正确

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

在隐藏孩子们之前，我们必须先
show（）
。第二次选择选项时不显示任何内容。这里还需要一点小小的改变。
$(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();
    }
  });
});