Divs nicht ausblenden, wenn verschiedene Radio-Button ausgewählt ist

Question

Problem: Ich habe drei Radio-Tasten, wenn Sie die erste das entsprechende Div auswählen muss angezeigt werden und die anderen müssen ausgeblendet werden, jetzt, wenn Sie die Tasten eine nach einander stapeln sich die divs anstatt sich zu verstecken und den richtigen zu zeigen. Wo habe ich den falschen Weg gewählt?

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

Sie haben hier Fehler.

es diese $("div.dect").hide(); stattdessen ist es von $("div.desc").hide();

sollte dect Sie buchstabiert es falsch

die Sie interessieren wird es Ihnen hilft.

$(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

Sie haben ein paar Fehler,

1. ("div.dect") die divs unten angepasst sein sollte grün ("div.desc")
2. Ihre input mit Wert blue aka 3. div sollte.
3. Sie haben Räume in Ihrem id ist wie wie in id=r ed und 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

Sie

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

Aber es sollte

sein verwendet haben

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

In Ihrem Code ist ein Tippfehler enthalten. Korrigiere das und es sollte funktionieren.