異なるラジオボタンが選択されているときにDivsが非表示にならない

Question

問題：私は3つのラジオボタンを持っています。最初に通信相手のdivを表示しなければならず、他は非表示にする必要があります。お互いのdivsは、隠しの代わりに積み上げて、正しいものを表示します。 どこを間違った経路を選んだのですか？

のjQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("input[name$='group1']").click(function() { 
     var test = $(this).val(); 
     $("div.desc").hide(); 
     $("#"+test).show(); 
    }); 
}); 

HTML：

<label><input type="radio" name="group1" value="red">1. DIV</label><br> 
<label><input type="radio" name="group1" value="green"> 2. DIV</label><br> 
<label><input type="radio" name="group1" value="blue"> 3. DIV</label><br> 

<div id= red class= dect style="display: none;"> 
    Only first DIV displayed 
</div> 

<div id= blue class= dect style="display: none;"> 
    Only second DIV displayed 
</div> 

<div id= green class= dect style="display: none;"> 
    Only third DIV displayed 
</div> 

$(document).ready(function() { 
 
    $("input[name$='group1']").click(function() { 
 
    var test = $(this).val(); 
 
    $("div.desc").hide(); 
 
    $("#" + test).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label><input type="radio" name="group1" value="red">1. DIV</label><br> 
 
<label><input type="radio" name="group1" value="green"> 2. DIV</label><br> 
 
<label><input type="radio" name="group1" value="blue"> 3. DIV</label><br> 
 

 
<div id=r ed class=d ect style="display: none;"> 
 
    Only first DIV displayed 
 
</div> 
 

 
<div id=b lue class=d ect style="display: none;"> 
 
    Only second DIV displayed 
 
</div> 
 

 
<div id=g reen class=d ect style="display: none;"> 
 
    Only third DIV displayed 
 
</div>

Answer 1

あなたがここでミスを犯しました。

それはそれはあなたがそれを間違った

を綴ったことは、それはあなたを助けます、これを試してみてくださいdectあるこの$("div.dect").hide();代わりの$("div.desc").hide();

でなければなりません。

$(document).ready(function(){ 
 
    $("input[name$='group1']").click(function() { 
 
     var test = $(this).val(); 
 
     $("div.dect").hide(); 
 
     $("#"+test).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label><input type="radio" name="group1" value="red">1. DIV</label><br> 
 
<label><input type="radio" name="group1" value="green"> 2. DIV</label><br> 
 
<label><input type="radio" name="group1" value="blue"> 3. DIV</label><br> 
 

 
<div id= red class= dect style="display: none;"> 
 
    Only first DIV displayed 
 
</div> 
 

 
<div id= blue class= dect style="display: none;"> 
 
    Only second DIV displayed 
 
</div> 
 

 
<div id= green class= dect style="display: none;"> 
 
    Only third DIV displayed 
 
</div>

Answer 2

あなたは、いくつかのミスを犯し、

1. ("div.dect")は以下divsに合わせて緑色にする必要があります値3. div別名blueと("div.desc")
2. あなたinputでなければなりません。
3. id=r edとid=b lue

$(document).ready(function() { 
 
    $("input[name$='group1']").click(function() { 
 
    var test = $(this).val(); 
 
    $("div.desc").hide(); 
 
    $("#" + test).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label><input type="radio" name="group1" value="red">1. DIV</label><br> 
 
<label><input type="radio" name="group1" value="blue"> 2. DIV</label><br> 
 
<label><input type="radio" name="group1" value="green"> 3. DIV</label><br> 
 

 
<div id="red" class="desc" style="display: none;"> 
 
    Only first DIV displayed 
 
</div> 
 

 
<div id="blue" class="desc" style="display: none;"> 
 
    Only second DIV displayed 
 
</div> 
 

 
<div id="green" class="desc" style="display: none;"> 
 
    Only third DIV displayed 
 
</div>

Answer 3

にあなたは

$("div.desc").hide(); 

を使用していた。しかし、それは

でなければなりませんようにのようにあなたの id年代のスペースを持っていました

$("div.dect").hide(); 

コードに誤字があります。それを修正すればうまくいくはずです。