Question

问题：我有三个单选按钮，如果你选择第一个对应的div必须出现而其他的必须被隐藏，现在如果你一个接一个地按下按钮，div只是堆积而不是隐藏并显示正确的。我在哪里选择错误的路径？

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.desc").hide();

但它应该是

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

您的代码中存在拼写错误。纠正它，它应该工作。

Answer 3

你犯了一些错误，

("div.dect")应为("div.desc")
您的input值blue又称3. div应为绿色，以匹配下面的divs。
您的id中有空格，如id=r ed和id=b lue

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: