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预览”和“Div 2预览”的功能。我获得了成功，并且选择了那些隐藏的按钮..但是问题是，当我点击“选择下方”收音机时，它们不会显示回来。为什么？

这是小提琴 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

Answer 2

因此，根据两个单独的值，显示两个div中的一个或不显示。

点击事件绑定到两组单选按钮，因此您无法使用$(this)获取已选中的值来选择要显示的ID，您需要指定选择哪个单选按钮来自它的名字。

您还需要检查选中了哪个其他选项（浏览器/选择）并显示或不显示。

使用更改而不是单击，这样就不会出现不必要的淡出/淡出。

我会将style="display:none"添加到div .tempDisp中，这样它们就会在没有js的情况下隐藏起来。

Working jsfiddle

$(document).ready(function () {

    $('input[name="rdSpace"]:radio,input[name="rdTemplate"]').on('change', function () {
        $("div.tempDisp").fadeOut('slow');
        if ($('input[name="rdTemplate"]:checked').val()=='preExisting'){
            $('[id="' + $('input[name="rdSpace"]:checked').val() + '"]').fadeIn('slow');
        }
    })
});

将此项设置为已选中，以便可以在用户更改第一个选择时进行显示决定。

<input type="radio" name="rdTemplate" value="preExisting" checked="checked" />

Answer 3

您的代码正在做什么..

$('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () { ==点击时，在带有指定选择器的广播中

$("div.tempDisp").fadeOut('slow'); == div与类tempDisp淡出慢

$('[id="' + $(this).val() + '"]').fadeIn('slow'); ==带有id的div（选择的无线电val）显示

问题

点击Upload your own file，当前值为uploadTemplate，jquery将无法找到id = uploadTemplate的div。没有任何反应。

onclick Choose below同样的事情..当前值为preExisting，再次找不到id=preExisting的div。所以再没有什么事情发生了

解决方法

 $(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');
      if($(this).val()=="preExisting"){ //here check if value is preExistig
         $('#'+ $('input[name="rdSpace"]:checked').val()).fadeIn('slow');
         //$('#RJ,#SM').fadeIn('slow');  //if yes show the div you wanted which is RJ,SM
      }
   });
});

<强>更新

替换

  $('#RJ,#SM').fadeIn('slow');

与

 $('#'+ $('input[name="rdSpace"]:checked').val()).fadeIn('slow');

updated working fiddle

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

3 个答案: