javascript - 如何使用 jQuery 分离和重新附加不同列表中不同类的项目？

Question

我正在处理一个带有下拉选择器和三个单独列表的页面，其中在下拉列表中选择一个选项将对每个列表上的所有项目执行 detach() ，但那些带有类名与当前所选选项的 value="" 相对应，而不影响其 nth-child 样式。 (例如，在下拉列表中选择“green”将导致每个列表仅显示具有“item-green”类的 li 元素。)

目前，当第一次选择下拉列表中的选项时，一切都会按预期进行。但是，当所选选项在所有后续尝试中发生更改时，每个列表上都不会显示任何内容。

var detach;

$("select").change(function() {
  var current = $("select option:selected").attr("value");
  var currentClass = ".item-" + current;

  $('.lists').show(0);

  $('.lists ul').each(function() {
    var detach = $(this).find("li").detach();
    var detachFiltered = detach.filter(currentClass);
    $(this).append(detachFiltered);
  });
});

.lists {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<select>
  <option selected disabled>Choose a color:</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
<div class="lists">
  <section>
    <h1>Set 1</h1>
    <ul>
      <li class="item-red">Burgundy</li>
      <li class="item-green">Chartreuse</li>
      <li class="item-blue">Cyan</li>
    </ul>
  </section>
  <section>
    <h1>Set 2</h1>
    <ul>
      <li class="item-red">Crimson</li>
      <li class="item-green">Olive</li>
      <li class="item-blue">Cyan</li>
    </ul>
  </section>
  <section>
    <h1>Set 3</h1>
    <ul>
      <li class="item-red">Scarlet</li>
      <li class="item-green">Lime</li>
      <li class="item-blue">Ultramarine</li>
    </ul>
  </section>
</div>

Answer 1

只需切换相关元素上的类来显示/隐藏它们，您的代码就可以变得更加简单，而不是在 DOM 中分离/重新附加 li 。

请注意，在下面的示例中，我修改了 li 上的类，使其具有一个通用的 .item 以便更轻松地定位它们，并使用一个单独的类来确定颜色他们属于。试试这个:

$("select").change(function() {
  var current = $(this).val();
  $('.lists').show().find('.item').removeClass('active').filter('.' + current).addClass('active');
});

.lists { display: none; }
.item { display: none; }
.item.active { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option selected disabled>Choose a color:</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
<div class="lists">
  <section>
    <h1>Set 1</h1>
    <ul>
      <li class="item red">Burgundy</li>
      <li class="item green">Chartreuse</li>
      <li class="item blue">Cyan</li>
    </ul>
  </section>
  <section>
    <h1>Set 2</h1>
    <ul>
      <li class="item red">Crimson</li>
      <li class="item green">Olive</li>
      <li class="item blue">Cyan</li>
    </ul>
  </section>
  <section>
    <h1>Set 3</h1>
    <ul>
      <li class="item red">Scarlet</li>
      <li class="item green">Lime</li>
      <li class="item blue">Ultramarine</li>
    </ul>
  </section>
</div>