的div不隐瞒

Question

问题： 我有三个单选按钮，如果你选择第一个对应的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

您在这里出错了。

那它应该是$("div.dect").hide();代替$("div.desc").hide();

是dect你拼写错了

试试这个它会帮助你。

$(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")应该("div.desc")
2. 您input与价值blue又名3. div应该是绿色的divs低于匹配。
3. 你在你的id的有空间，如在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(); 

但应

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

。在你的代码中的错字。改正这一点，它应该工作。