javascript - 如何让不同的单选按钮可以在 jquery 中按类或 id 显示不同的 div

Question

我有一些单选按钮，它们从 mysql 查询中获取值和类。 查询是这样的:

<?php
$result = mysql_query("SELECT * FROM vhcourse WHERE label_id= 1");
while ($row = mysql_fetch_array($result)) {
    if ($row['id']==1) {
        $class="class='course_radios'";
    } elseif ($row['id']==2) { 
        $class="class='course_radios_tw'";
    } else {
        $class="class='course_radios_thr'";
    }
    echo "<input type='radio' ".$class." name='vh_course_radio' value=".$row['course_name'].">" .$row['course_name'];
}
?>

我想做这样的事情:

1) 如果单选按钮选中类 course_radios，则 div#one 将为 fadein()。

2) 如果单选按钮选中类 course_radios_tw，则 div#two 将是 fadein()。

3) 如果单选按钮选中类 course_radios_thr，则 div#three 将为 fadein()。

我想用 jquery 来做这个。请帮助我做到这一点如果可能请给我完整的代码。

Answer 1

只需复制文件中的代码并运行即可

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$( document ).ready(function() {

 $(".course_radios").click(function(){
      $( "#one" ).fadeIn( "slow", function() {  });
 });

 $(".course_radios_tw").click(function(){
      $( "#two" ).fadeIn( "slow", function() { });
 });

 $(".course_radios_thr").click(function(){
      $( "#three" ).fadeIn( "slow", function() { });
 });
});
</script>


 <input type="radio" class="course_radios" name="div-fade" value="one" > first div <br/>
 <input type="radio" class="course_radios_tw"  name="div-fade2" value="two" >  second div<br/>
 <input type="radio" class="course_radios_thr"  name="div-fade3" value="three" >third div<br/>


<div id="one" style="display: none; border:1px solid red;"> div 1</div>
<br>
<div id="two" style="display: none; border:1px solid red;">div 2</div>
<br>
<div id="three" style="display: none; border:1px solid red;">div 3</div>