當頁面加載時隱藏DIV，然後在按下單選按鈕時顯示它們

Question

我有3個單選按鈕，它們被稱爲「簡單」「中」和「硬」。每個鏈接到一個單獨的Javascript函數。這些函數顯示一個div而隱藏另外兩個div。

這樣做的目的是讓用戶能夠選擇一個選項並查看該選項的div，例如，如果他們按下「Easy」單選按鈕，則應該顯示「Easy」div，並且應該隱藏「中」和「硬」格。

我一直在努力讓這個工作一個星期，我想我已經嘗試了每一個有關stackoverflow的建議，但我希望有一些我錯過了。

這些都是在我的HTML單選按鈕：

<td width="100"><div align="center" class="radio"> 
<input type="radio" name='thing' value='valuable' id="easy" onclick="showEasy()"/></div> 
</td> 

<td width="100"><div align="center" class="radio"> 
<input type="radio" name='thing' value='valuable' id="medium" onclick="showMedium()"/></div> 
</td> 

<td width="100"><div align="center" class="radio"> 
<input type="radio" name='thing' value='valuable' id="hard" onclick="showHard()"/></div> 
</td> 

這些是我想要顯示/隱藏的DIV：

<td colspan="8" rowspan="12" align="center"> 
<div align="center" id="easyDIV"><img src="/images/pic1.jpg" alt="If you can see this, then the image didn't load properly." class="distort1" id="sample"/></div> 

<div align="center" id="mediumDIV"><img src="/images/pic2.jpg" alt="If you can see this, then the image didn't load properly." class="distort2" id="sample1"/></div> 

<div align="center" id="hardDIV"><img src="/images/pic3.jpg" alt="If you can see this, then the image didn't load properly." class="distort3" id="sample2"/></div> 
</td> 

這是在頂部的腳本我有我頁，每個函數應該一次顯示一個DIV：

<script> 
function showEasy() 
{ 
$("#easyDIV").removeClass("displaynone"); 

//Make sure mediumDIV is not visible 
$("#mediumDIV").addClass("displaynone"); 
//Make sure hardDIV is not visible 
$("#hardDIV").addClass("displaynone"); 
} 

function showMedium() 
{ 
$("#mediumDIV").removeClass("displaynone"); 

//Make sure easyDIV is not visible 
$("#easyDIV").addClass("displaynone"); 
//Make sure hardDIV is not visible 
$("#hardDIV").addClass("displaynone"); 
} 

function showHard() 
{ 
$("#hardDIV").removeClass("displaynone"); 

//Make sure easyDIV is not visible 
$("#easyDIV").addClass("displaynone"); 
//Make sure mediumDIV is not visible 
$("#mediumDIV").addClass("displaynone"); 
} 
</script> 

我只希望中型div顯示在s撻，所以我有showMedium();設置爲在頁面加載完成後運行，這成功隱藏了Easy和Hard divs。問題是，所有3個div都可見一秒或兩個，直到每個頁面元素加載完成。一旦加載完畢，showMedium();就會運行，Easy和Hard divs會隱藏起來。

這看起來對用戶來說真的很糟糕，所以我一直在試圖找到一種方法來將這兩個div默認隱藏起來，並且只在開始時顯示Medium div。

我試過幾種方法，我已經試圖通過他們的div設置爲<div hidden>

我也試着通過設置自己的風格躲在兩個div到display:none像這樣隱藏兩個div：

<div align="center" id="easyDIV" style="display: none;"><img src="" alt="If you can see this, then the image didn't load properly." id="sample"/></div> 

然後爲了顯示每個div，我試圖通過在上面的Javascript函數中包含代碼來將此樣式更改爲display: inline和display: block。

這些嘗試不起作用，2個div成功隱藏（因爲它們在頁面加載時沒有出現），但每當我嘗試單擊Easy或Hard單選按鈕時，Medium div正確消失，它被一個空白空間取代，這意味着Easy和Hard divs仍然隱藏。

我無法弄清楚如何讓這個工作，它似乎是我可以讓單選按鈕成功工作和顯示/隱藏正確的div的唯一方法是讓所有3個加載/出現在屏幕上第二或兩個頁面加載時。我真的很感激任何關於如何按照我喜歡的方式工作的建議。我會嘗試任何建議，並提前感謝您的幫助！

Answer 1

UPDATE

我創建了一個版本的插件包括：

http://jsfiddle.net/9L0fvt9n/

有兩點要注意：

1）我已經包括在小提琴的插件，你的代碼是在該節的底部。

2）你使用的插件是非常古老的...如果你需要使用它，請確保你也使用頁面上的jQuery Migrate：https://github.com/jquery/jquery-migrate/#readme（只需將其與常規jQuery一起導入）。

3）該問題是由插件的內部代碼引起的。要解決它，而不是使用display:none隱藏圖像，我使用visibility:hidden。這是不同的，因爲display:none呈現頁面，就好像該元素從未在那裏開始，visibility:hidden隱藏該元素，但它仍然佔用頁面上的空間。

4）因爲visibility:hidden會在圖片所在的頁面上留下空白處，所以我添加了一個包裝<div>（類別爲.container），並使用CSS將所有三個圖像放在一起。由於每次只顯示一個圖像，所有圖像都處於預期位置（您可以通過移除我的新CSS樣式並查看效果來演示我的演示）。

讓我知道它是否有幫助！

---

我創建了一個解決方案的演示的jsfiddle但你應該知道，你們中許多人正在使用的技術是現在外的日期，而不是最好的做法（例如 - 不要使用表格來顯示非表格信息）。

在我的例子，我已經糾正了其中的幾個：

http://jsfiddle.net/wxda5yoq/

當頁面最初加載，我已經設置了CSS，只顯示所需的div元素。

之後，基於單選按鈕選擇動態顯示和隱藏新的div元素。即使是主要的處理程序是：

$('.radio input').on('click', function(){ 
    //Hide all image divs 
    $imageDivs.css('display','none'); 

    //Then display the image div we want to see 
    //To find that out we'll get the id of the current radio button 
    var radioID = $(this).attr('id'); 

    //And then we'll display that image div 
    $('#' + radioID + 'DIV').css('display','block'); 
}); 

讓我知道如果這個回答你的問題:)

Answer 2

將displaynone類應用於不希望從頭開始顯示的類，因爲所有JavaScript在運行時都會完全重置相關所有div的類。

例子：

<td colspan="8" rowspan="12" align="center"> 
<div align="center" id="easyDIV" class="displaynone"><img src="" alt="If you can see this, then the image didn't load properly." id="sample"/></div> 

<div align="center" id="mediumDIV"><img src="" alt="If you can see this, then the image didn't load properly." id="sample1"/></div> 

<div align="center" id="hardDIV" class="displaynone"><img src="" alt="If you can see this, then the image didn't load properly." id="sample2"/></div> 
</td> 

你甚至可以刪除，然後在頁面加載（）運行displayMedium代碼。

Answer 3

另外它可能會更快地寫一些邏輯來測試是單選按鈕（如果返回true）然後切換其他類。

獲取每個輸入的值：

https://stackoverflow.com/a/23053203/4812515

var easy = $('easy:checked').val(), 
medium = $('medium:checked').va(), 
hard$('hard').val(); 


if(this.radiobutton == true){ 
medium.toggleClass(); } 
else{ 
toggle some more classes 
}