如何根据特定条件更改jquery中div标记上的css类

我有以下HTML：

<div class="required">
<label for="personID">People</label>
<select name="personID" id="personID"  class="select">
<option value="" selected="selected" >No One Selected</option>
<option value="groupA" >Group A</option>
<option value="groupB" >Group B</option>
...

人
没有人被选中
A组
B组
...

我有一个HTML：

<div class="visControl optional" style="display: none;">
<label for="refNum">Reference Number</label>
<input type="text" value="" name="refNum" id="refNum">
</div>

参考号

我有以下脚本：

<script>
  $('#personID').change(function() {
    if ($('#personID').val() == 'groupB') $('.visControl').show();
    else $('.visControl').hide();
  }); // end .change()
</script>

$（'#personID'）。更改（函数（）{
if（$（'#personID'）.val（）=='groupB'）$（'.visControl'）.show（）；
else$（'.visControl'）.hide（）；
}); // (完)

我的脚本正确地控制了参考号块的可见性。但我希望它也能将class属性从“optional”更改为“required”，以匹配可见性

换句话说，当我显示参考编号块时，我希望

div.optional

变为

div.required

，当我隐藏参考编号块时，我希望

div.required

变为

div.optional
尝试：

$('div.optional').addClass('required'); 
$('div.optional').removeClass('optional');

使用：

更改：

if ($('#personID').val() == 'groupB') $('.visControl').show();
else $('.visControl').hide();

致：

这对我不起作用。我再也没有机会展示这个街区了，或者hideI只是给我的答案加了一把小提琴。如果您在更改select时观察DOM，您将看到类的更改。好的，谢谢@j08691--我看到它应该可以工作，所以我需要在脚本中使用它。等我弄明白后再发回来。真棒@j8691——这正是我需要它做的。谢谢你的帮助。事实上@j8691这已经非常接近我需要的了。在我测试它之后，我认识到该切换保持可选和必需的交替。我真正需要的是
必需的
何时.显示（）和
可选的
何时.隐藏（）类似于[at]CamTullos下面的内容，但可能在一行代码和两行代码上我想你的答案@CamTullos和[at]J8691的一部分是我需要组合成1的。这是可行的，但我想知道它是否可以简化或合并成一行代码
if（$（'.#personID'）.val（）='groupB'）{$（'.visControl'）.show（）.addClass（'required'）；$（'.viscocontrol'）.show（）.removeClass（'optional'）；}else{$（'viscocontrol'）.hide（）.addClass（'optional'）；$（'viscocontrol.hide'））.removeClass（'required'）；
，div类已经具有的id是可选的或必需的。这是继续添加更多类似的类还是只添加一次？
if ($('#personID').val() == 'groupB') $('.visControl').show().toggleClass('required  optional');
else $('.visControl').hide().toggleClass('required  optional');