javascript - 选择单选按钮时隐藏/显示 div

Question

这是我的 html 代码

<div class="wrapper"> <strong>Space portion</strong>

<br />
<input type="radio" name="rdSpace" value="RJ" />Space 1
<br />
<input type="radio" name="rdSpace" value="SM" />Space 2
<br />
<br />
</div>
<div class="wrapper"> <strong> Template</strong>

<br />
<input type="radio" name="rdTemplate" value="uploadTemplate" />Upload your own file
<label class="cabinet">
    <input style="margin-left:10px;" type="file" name="user_upload_template"
    class="uploader" id="file">
    <br />
    <input type="radio" name="rdTemplate" value="preExisting" />Choose below
    <div id="RJ" class="tempDisp">Div 1 Preview</div>
    <div id="SM" class="tempDisp">Div 2 Preview</div>

这是jquery代码

$(document).ready(function () {
$("div.tempDisp").hide();
$('[id="' + $(":radio:checked").val() + '"]').show();
$('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () {
    $("div.tempDisp").fadeOut('slow');
    $('[id="' + $(this).val() + '"]').fadeIn('slow');
});
});

jquery代码的目的是在选择“Space 1”广播时显示“Div 1 Preview”，并在选择“Space 2”广播时显示“Div 2 Preview”..到目前为止，它工作正常

现在我尝试在选择“上传您自己的文件”单选时添加隐藏“Div 1 Preview”和“Div 2 Preview”的功能..我成功了，并且在选择所述按钮时隐藏了这些按钮..但是问题是，当我点击返回“选择下面”单选按钮时，它们不会显示回来。为什么？

这是 fiddle http://jsfiddle.net/bTM66/

Answer 1

试试这个:

$(document).ready(function () {
    $("div.tempDisp").hide();
    $('[id="' + $(":radio:checked").val() + '"]').show();
    $('input[name="rdSpace"]:radio,input[name="rdTemplate"]').change(function () {
        $("div.tempDisp").fadeOut('slow');
        if ($(this).val() === "preExisting") {
            $(":radio:checked:first").change();
        } else {
            if(!$('input[value="uploadTemplate"]').is(':checked')){
            $('[id="' + $(this).val() + '"]').fadeIn('slow');
          }
        }
    });
});

参见Sample Fiddle