选择不同的单选按钮时 Div 不会隐藏

Question

问题：我有三个单选按钮，如果你 select 第一个通讯员 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

你犯了一些错误，

("div.dect") 应该是 ("div.desc")
您的 input 值 blue 又名 3. div 应该是绿色以匹配下面的 divs。
您的 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();

您的代码中有错字。更正它，它应该可以工作。

选择不同的单选按钮时 Div 不会隐藏

Divs don't hide when different radio button is selected

html

jquery

hide

radio-button