Question

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

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

Answer 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代码所做的是将第一个选定值设置为第一个选项。接下来它的作用是删除隐藏的类，然后将类添加回上一个选定的类。最后，它将先前选定的元素重新分配给当前选定的元素。这样，以前选择的内容会不断更新，div会相应显示和隐藏。

选择时显示Div并隐藏所有其他

1 个答案: