在页面加载时隐藏 DIV，然后在按下单选按钮时显示它们

Question

我有 3 个单选按钮，分别称为“简单”、“中等”和“困难”。每个都链接到一个单独的 Javascript 函数。这些函数显示一个 div 而隐藏另外两个 divs.

这样做的目的是让用户能够选择一个选项并查看该选项的 div，例如，如果他们按下“简单”单选按钮，那么“简单”div 应该显示，“中等”和“困难”div 应该隐藏。

一周以来我一直在努力让它工作，我想我已经尝试了所有关于 Whosebug 的相关建议，但我希望我遗漏了一些小东西。

这些是我的单选按钮 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>

这些是我想要的 DIVshow/hide:

<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>

我只想在开始时显示 Medium div，所以我将 showMedium(); 设置为运行页面加载完成后，这成功地隐藏了 Easy 和辛苦 div 秒。问题是所有 3 div 都可见一两秒，直到每个页面元素都完成加载。加载所有内容后，showMedium(); 运行以及简单和困难 div 将被隐藏。

这对用户来说真的很糟糕，所以我一直在尝试找到一种方法来默认隐藏这两个 div，而只在开头显示中等 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，我尝试将此样式更改为 display: inline 和 display: block，方法是在上面的 Javascript 函数中包含执行此操作的代码。

这些尝试没有成功，2 divs 被成功隐藏（因为它们在页面加载时没有出现）但是每当我尝试点击简单或困难单选按钮时，同时Medium div 正确消失，它被一个空的 space 代替，这意味着 Easy 和 Hard div 仍然隐藏。

我不知道如何让它工作，这似乎是让单选按钮成功工作和 showing/hiding 正确 divs 的唯一方法，就是拥有所有3 load/appear 在页面加载时在屏幕上显示一两秒钟。我真的很感激任何关于让它按照我喜欢的方式工作的建议。我会尝试任何建议，并提前感谢您的帮助！

Answer 1

将 displaynone class 应用于您不想从一开始就显示的 classes，因为您所有的 javascript 完全重置 class 运行.

时所有有问题的 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>

您甚至可以在页面加载时删除代码运行ning displayMedium()。

Answer 2

此外，编写一些逻辑来测试是否单击了单选按钮（如果返回 true）然后切换另一个按钮可能会更快类。

获取每个输入的值：

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


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

Answer 3

更新

我创建了一个包含插件的版本：

http://jsfiddle.net/9L0fvt9n/

一些注意事项：

1) 我已将插件包含在 fiddle 中，您的代码位于该部分的底部。

2) 您使用的插件很旧...如果您需要使用它，请确保您也在页面上使用 jQuery 迁移：https://github.com/jquery/jquery-migrate/#readme（只需将其导入与常规 jQuery).

3) 问题是由插件的内部代码引起的。为了解决它，我没有使用 display:none 隐藏图像，而是使用 visibility:hidden。这是不同的，因为 display:none 呈现页面，就好像该元素从一开始就不存在一样，visibility:hidden 隐藏了该元素，但它仍将占据页面上的 space。

4) 因为 visibility:hidden 在图像原本所在的页面上留下空白 spaces，我添加了一个包装器 <div>（class .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');
});

如果这回答了您的问题，请告诉我:)

在页面加载时隐藏 DIV，然后在按下单选按钮时显示它们

Hide DIVs while page loads, then show them when Radio Buttons are pressed

html

javascript

css

jquery

hidden