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我尝试将此样式更改为display: inline和display: block，方法是在上面的Javascript函数中包含代码。

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

我无法弄清楚如何使这个工作，似乎我可以让单选按钮成功工作并显示/隐藏正确的div的唯一方法是让所有3个加载/出现在屏幕上一秒钟页面加载时两个或两个。我非常感谢任何关于让我按照我喜欢的方式工作的建议。我会尝试任何建议，并提前感谢您的帮助！

Answer 1

<强>更新

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

http://jsfiddle.net/9L0fvt9n/

几点说明：

1）我已将插件包含在小提琴中，您的代码位于该部分的底部。

2）你正在使用的插件很老......如果你需要使用它，请确保你也在页面上使用jQuery Migrate：https://github.com/jquery/jquery-migrate/#readme（只需将它与常规jQuery一起导入）。 / p>

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
}

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

3 个答案: