Pokazywanie/ukrywanie zawartości dla określonej klasy przy użyciu jquery

Question

Jestem nowy w jquery i może to jest głupie pytanie, ale szukałem odpowiedzi niemal wszędzie bez jej znalezienia. A więc oto:

Chcę wyświetlać różne treści w zależności od opcji wybranej w rozwijanym formularzu. Jak dowiedziałem się tutaj na StackOverflow, ca użyć funkcji zmiany, aby to zrobić:

Przykład:

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

Ten kod alove mi pokazać ów treści wewnątrz różnych div w zależności od „państwa” Wybieram w menu rozwijanym. Ale jak połączyć wartości z rozwijanego do konkretnej klasy zamiast id. Problem polega oczywiście na tym, że chcę pokazać kilka elementów div, które mają wspólną klasę, gdy wybiorę stan w rozwijanym menu.

Byłbym bardzo wdzięczny, gdyby ktoś mógł wskazać mi właściwy kierunek.

Paul

Answer 1

można użyć zamiast klasy Id jak ten

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

i swojej JQuery

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