在選擇單選按鈕時隱藏/顯示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預覽”和“ 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中的一個或一個都不顯示。

click事件綁定到兩組單選按鈕，因此您不能使用$(this)來獲取已選中的值以選擇要顯示的ID，您需要通過其名稱指定選擇哪個單選按鈕。

您還需要檢查哪個其他選項（瀏覽器/選擇）已選中並顯示或未顯示。

並且使用更改而不是單擊，這樣您就不會獲得不必要的淡出/淡出。

而且我會在divs .tempDisp中添加style="display:none" ，這樣它們就可以在沒有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" />

Answer 3

您的代碼在做什么。

$('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () { ==點擊時，在帶有給定選擇器的廣播中

$("div.tempDisp").fadeOut('slow'); ==類tempDisp的div淡出速度慢

$('[id="' + $(this).val() + '"]').fadeIn('slow'); ==帶有ID的div（選定的廣播價）顯示

問題

單擊“ 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');

更新工作提琴