选中时显示 Div 并隐藏所有其他答案

【问题标题】：Show Div and Hide All Others When Selected选中时显示 Div 并隐藏所有其他
【发布时间】：2016-09-09 11:19:04
【问题描述】：

这似乎应该很容易，但我还没有让它工作。我有一个带有 10 个左右选项的 html 选择元素。当用户选择其中一个选项时，会通过删除 .hidden 类来显示一个 Div，该类只是 CSS 中具有 display:none 的类。这一切都很好，但是当我选择下一个选项时，前一个 div 保持可见。我尝试使用 .toggleClass，但没有奏效。

$(function () {
  $("#calc-select").change(function () {
    $('#' + $("#calc-select").val()).removeClass('hidden');
  });
});

【问题讨论】：

你要重新添加隐藏类吗？
我尝试了 .toggleClass 而不是 removeClass，但效果相同。最终我想要的是将它添加回所有其他 Div。也许某种 .each 来遍历选项？

标签： jquery

【解决方案1】：

你可以做的就是将之前选择的选项保存在一个变量中

$(function () {
  var prevSelected = $("#Test1");

  $("#calc-select").change(function () {
      $('#' + $("#calc-select").val()).removeClass('hidden');
      prevSelected.addClass('hidden');
      prevSelected = $('#' + $("#calc-select").val());
  });
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="calc-select">
  <option>Test1</option>
  <option>Test2</option>
  <option>Test3</option>
  <option>Test4</option>
  <option>Test5</option>
</select>

<div id="Test1">
Content 1
</div>
<div id="Test2" class="hidden">
Content 2
</div>
<div id="Test3" class="hidden">
Content 3
</div>
<div id="Test4" class="hidden">
Content 4
</div>
<div id="Test5" class="hidden">
Content 5
</div>

现在这个 jQuery 代码所做的就是将第一个选择的值设置为第一个选项。接下来它所做的是删除隐藏的类，然后将该类添加回之前选择的类。最后，它将先前选择的元素重新分配给当前选择的元素。这样，之前选择的会不断更新，divs 会相应地显示和隐藏。

【讨论】：

那行得通。谢谢！并感谢您的详尽解释。
很高兴为您提供帮助，如果您还有其他问题，请告诉我@TonyTambe :)