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

Question

我是jquery的新手,也许这是一个愚蠢的问题,但我在没有找到答案的情况下到处寻找答案.那么,我们走了:

我想显示不同的内容,具体取决于我在下拉表单中选择的选项.正如我在StackOverflow上学到的那样,您可以使用更改功能来执行此操作:

例:

<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.

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

保罗

Answer 1

你可以像这样使用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();    
    });
});