如何使用jquery显示基于无线电选择的2个或更多div？

问题已经解决，但如果你有一个更有效的解决方案，那么欢迎你。

我知道之前曾经问过这样的问题，但我无法让这个问题发挥作用。

我试图根据无线电选择显示几个div。 HTML是由wptheming option-framework自动生成的，所以我无法改变它。 我可以改变的是我试图编写的jQuery函数，没有运气。

[这是我写的代码] [1]来测试我的想法，但它不起作用。

我再说一遍，我可以改变jQuery部分，但不能改变HTML。 我究竟做错了什么？

对于那些不想去jsfiddle的人是代码：

这是代码更正： @Zakary Kniebel

或者是基于 @Zakary Kniebel写的’FOR’的’ciclic’版本

实际上代码会这样做：

如果选择1，则仅显示1个部分，如果选择2，则仅显示2个部分，依此类推。

副作用，不需要但很好，在第一次选择后，无论你选择的数字，任何其他

将消失，让你专注于单选按钮，如果你不需要这个效果只需放置： //之前这个：

 $(".section").not("#section-how_many_custom_posts").hide(); 

或者记下选择器以查看不会消失的部分。

HTML

 
 
Choose how many Custom Posts you would like to generate
 
 
  0  1  2  3  4  5 
 
It depends on you, how many custom posts would you like?
 
 
 
 
Test first custom Post show/hide
 
 
  0  1  2  3  4  5 
 
Test first custom Post show/hide
 
 
 
 
Test second custom Post show/hide
 
 
  0  1  2  3  4  5 
 
Test second custom Post show/hide
 
 
 
 
Test Third custom Post show/hide
 
 
  0  1  2  3  4  5 
 
Test Third custom Post show/hide
 
 
 
 
Test Fourth custom Post show/hide
 
 
  0  1  2  3  4  5 
 
Test Fourth custom Post show/hide
 
 
 
 
Test Fifth custom Post show/hide
 
 
  0  1  2  3  4  5 
 
Test Fifth custom Post show/hide
 
  

JS

 jQuery(document).ready(function ($) { $types = $('.of-radio'); $types.change(function () { $(".section").not("#section-how_many_custom_posts").hide(); $this = $(this).val(); if ($this == "1") { $('#section-custom_posts_n1').show(); } else if ($this == "2") { $('#section-custom_posts_n1').show(); $('#section-custom_posts_n2').show(); } else if ($this == "3") { $('#section-custom_posts_n1').show(); $('#section-custom_posts_n2').show(); $('#section-custom_posts_n3').show(); } else if ($this == "4") { $('#section-custom_posts_n1').show(); $('#section-custom_posts_n2').show(); $('#section-custom_posts_n3').show(); $('#section-custom_posts_n4').show(); } else if ($this == "5") { $('#section-custom_posts_n1').show(); $('#section-custom_posts_n2').show(); $('#section-custom_posts_n3').show(); $('#section-custom_posts_n4').show(); $('#section-custom_posts_n5').show(); } }); 

}）;

CSS

 .hidden { display:none } 

Answer 1

你需要改变：

$types = $('#section-how_many_custom_posts');

至

$types = $('.of-radio');

这是因为，您的ID是唯一的，并且您没有将该ID应用于单选按钮。 您在所有单选按钮上都有公共类别of-radio ，因此您要做的是选择该类的所有元素，并根据单击该类的单选按钮显示所需的div 。

更新小提琴

UPDATE

基于您在代码中新发现的错误，我已经更新了您的小提示：

更新小提琴2

更新2

这不是您原来的问题，但在您的一条评论中，您提到过您希望尝试将代码转换为循环。 这是工作小提琴：

更新小提琴3