Question

我在这里要做的是根据从下拉列表中选择的值隐藏/显示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>

的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

＆＃13;

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

＆＃13;

.hide{display:none}

＆＃13;

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

＆＃13;

正确地选择你的选择

Answer 2

<强> Updated fiddle

问题：

当您添加课程hide然后执行.show()时，它不会删除该课程，因此该元素不会显示。
selClass是一个变量，因此您无法在:not(.selClass)中将其称为字符串，但您必须将变量与$('#listUserGrid :not(.'+selClass+')')之类的选择器连接起来
你应该在隐藏那些不匹配的学生之前展示其他学生。

建议的解决方案：

使用show/hide代替使用课程hide：

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

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

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

错误地调用了选择器。

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

隐藏/显示使用类无法正常工作

3 个答案: