2

这是我的 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/

4

3 回答 3

3

试试这个：

$(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');
          }
        }
    });
});

见样品小提琴

于 2013-03-06T10:37:08.047 回答
2

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

click 事件绑定到两组单选按钮，因此您不能使用$(this)获取选中的单选按钮的值来选择要显示的 ID，您需要通过其名称指定它来自哪个单选按钮选择。

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

并使用更改而不是单击，这样您就不会得到不必要的淡出/淡入。

而且我会添加style="display:none"到 div .tempDisp 以便它们在没有 js 的情况下在加载时已经隐藏。

工作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" />
于 2013-03-06T10:33:59.193 回答
2

你的代码在做什么..

$('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () {== 单击时，在带有给定选择器的收音机上

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

$('[id="' + $(this).val() + '"]').fadeIn('slow');== 带有 id 的 div (selected radio val) show

问题

单击Upload your own file当前值是uploadTemplate，jquery 将无法找到带有id = uploadTemplate. 所以什么也没有发生。

onclick Choose below同样的事情.. 当前值是preExisting并且它不会再次找到带有 . 的 div id=preExisting。所以什么都不会再发生

周围的工作 

 $(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');

更新的工作小提琴

于 2013-03-06T10:35:21.847 回答