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

Question

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

这样做的目的是让用户能够选择一个选项并查看该选项的 div，例如，如果他们按下“Easy”单选按钮，则应显示“Easy”div，并且应该隐藏“中”和“硬”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>

我只希望在开始时显示 Medium div，因此我将 showMedium(); 设置为在页面完成加载后运行，这成功隐藏了 Easy 和 Hard div。问题是所有 3 个 div 都可见一两秒，直到每个页面元素完成加载。加载完所有内容后，showMedium(); 运行，Easy 和 Hard div 被隐藏。

这对用户来说看起来真的很糟糕，所以我一直在尝试找到一种方法来默认隐藏这两个 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 div 仍然隐藏。

我不知道如何让它工作，似乎我可以让单选按钮成功工作并显示/隐藏正确的 div 的唯一方法是让所有 3 个加载/出现在屏幕上一秒钟或两个页面加载时。我真的很感激任何关于让它按照我想要的方式工作的建议。我会尝试任何建议，并提前感谢您的帮助！

Answer 1

从一开始就将 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 2

另外，编写一些逻辑来测试可能更快的是单击单选按钮（如果返回 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
}

Answer 3

更新

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

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

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