使用 jquery 显示/隐藏特定类的内容

我是 jquery 的新手，也许这是一个愚蠢的问题，但我几乎到处都在寻找答案，但没有找到。那么，我们开始吧：

我想根据我在下拉表单中选择的选项来显示不同的内容。正如我在 StackOverflow 上了解到的，您可以使用更改函数来执行此操作：

Example:

<script type="text/javascript">

$(document).ready(function() {
$('#myselector').change(function(){
  $('.statecontent').hide();
  $('#' + $(this).val()).show();    
});
});

</script>

 <select id="myselector">
 <option value="state1"></option><br />
 <option value="state2"></option><br />
 <option value="state3"></option><br />
 </select>

<div id="state1" class="statecontent">State1 Specific Page Content Goes here</div><br     />
<div id="state2" class="statecontent">State2 Specific Page Content Goes here</div><br />
<div id="state3" class="statecontent">State3 Specific Page Content Goes here</div><br />

这段代码将喜欢我根据我在下拉列表中选择的“状态”来显示不同 div 内的内容。但是如何将下拉列表的值连接到特定的类而不是 id。问题当然是，当我在下拉列表中选择一个状态时，我想显示几个共享公共类的 div。

如果有人能指出我正确的方向，我将非常感激。

Paul

你可以像这样使用 class 而不是 Id

<div class="statecontent state1">State1 Specific Page Content Goes here</div><br />
<div class="statecontent state1">State1 Specific Page2 Content Goes here</div><br />
<div class="statecontent state2">State2 Specific Page Content Goes here</div><br />
<div class="statecontent state3">State3 Specific Page Content Goes here</div><br />

和你的 JQuery

$(document).ready(function() {
    $('#myselector').change(function() {
        $('.statecontent').hide();
        $('.' + $(this).val()).show();    
    });
});