我知道之前已经问过这样的问题，但我无法让这个问题发挥作用。
我试图根据无线电选择显示几个div。 HTML由wptheming option-framework自动生成，因此我无法更改它。我可以改变的是我试图写的jQuery函数，没有运气。
[这是我写的代码] [1]来测试我的想法，但它不起作用。
我再说一遍，我可以改变jQuery部分，但不能改变HTML。我做错了什么？
对于那些不想去jsfiddle的人来说，代码是：
This is the code Corrected by: @Zakary Kniebel
由@Zakary Kniebel撰写的 Or a 'ciclic' version based on 'FOR'实际上代码会这样做：
如果选择1，则仅显示1个部分， 如果选择2，它只显示2个部分， 等等。
副作用，不需要但很好，在第一次选择后，无论你选择的数字，任何其他<section>都会消失，让你专注于单选按钮，如果你不需要这个效果就放这个：//之前：
$(".section").not("#section-how_many_custom_posts").hide();
或者记下选择器以查看不会消失的部分。
HTML
<div id="section-how_many_custom_posts" class="section section-radio hidden" style="display: block;">
<h4 class="heading">Choose how many Custom Posts you would like to generate</h4>
<div class="option">
<div class="controls">
<input class="of-input of-radio" type="radio" name="mdframework[how_many_custom_posts]" id="mdframework-how_many_custom_posts-0" value="0" checked="checked">
<label for="mdframework-how_many_custom_posts-0">0</label>
<input class="of-input of-radio" type="radio" name="mdframework[how_many_custom_posts]" id="mdframework-how_many_custom_posts-1" value="1">
<label for="mdframework-how_many_custom_posts-1">1</label>
<input class="of-input of-radio" type="radio" name="mdframework[how_many_custom_posts]" id="mdframework-how_many_custom_posts-2" value="2">
<label for="mdframework-how_many_custom_posts-2">2</label>
<input class="of-input of-radio" type="radio" name="mdframework[how_many_custom_posts]" id="mdframework-how_many_custom_posts-3" value="3">
<label for="mdframework-how_many_custom_posts-3">3</label>
<input class="of-input of-radio" type="radio" name="mdframework[how_many_custom_posts]" id="mdframework-how_many_custom_posts-4" value="4">
<label for="mdframework-how_many_custom_posts-4">4</label>
<input class="of-input of-radio" type="radio" name="mdframework[how_many_custom_posts]" id="mdframework-how_many_custom_posts-5" value="5">
<label for="mdframework-how_many_custom_posts-5">5</label>
</div>
<div class="explain">It depends on you, how many custom posts would you like?</div>
</div>
</div>
<div id="section-custom_posts_n1" class="section section-radio hidden">
<h4 class="heading">Test first custom Post show/hide</h4>
<div class="option">
<div class="controls">
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n1]" id="mdframework-custom_posts_n1-0" value="0">
<label for="mdframework-custom_posts_n1-0">0</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n1]" id="mdframework-custom_posts_n1-1" value="1" checked="checked">
<label for="mdframework-custom_posts_n1-1">1</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n1]" id="mdframework-custom_posts_n1-2" value="2">
<label for="mdframework-custom_posts_n1-2">2</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n1]" id="mdframework-custom_posts_n1-3" value="3">
<label for="mdframework-custom_posts_n1-3">3</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n1]" id="mdframework-custom_posts_n1-4" value="4">
<label for="mdframework-custom_posts_n1-4">4</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n1]" id="mdframework-custom_posts_n1-5" value="5">
<label for="mdframework-custom_posts_n1-5">5</label>
</div>
<div class="explain">Test first custom Post show/hide</div>
</div>
</div>
<div id="section-custom_posts_n2" class="section section-radio hidden">
<h4 class="heading">Test second custom Post show/hide</h4>
<div class="option">
<div class="controls">
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n2]" id="mdframework-custom_posts_n2-0" value="0">
<label for="mdframework-custom_posts_n2-0">0</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n2]" id="mdframework-custom_posts_n2-1" value="1" checked="checked">
<label for="mdframework-custom_posts_n2-1">1</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n2]" id="mdframework-custom_posts_n2-2" value="2">
<label for="mdframework-custom_posts_n2-2">2</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n2]" id="mdframework-custom_posts_n2-3" value="3">
<label for="mdframework-custom_posts_n2-3">3</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n2]" id="mdframework-custom_posts_n2-4" value="4">
<label for="mdframework-custom_posts_n2-4">4</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n2]" id="mdframework-custom_posts_n2-5" value="5">
<label for="mdframework-custom_posts_n2-5">5</label>
</div>
<div class="explain">Test second custom Post show/hide</div>
</div>
</div>
<div id="section-custom_posts_n3" class="section section-radio hidden">
<h4 class="heading">Test Third custom Post show/hide</h4>
<div class="option">
<div class="controls">
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n3]" id="mdframework-custom_posts_n3-0" value="0">
<label for="mdframework-custom_posts_n3-0">0</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n3]" id="mdframework-custom_posts_n3-1" value="1" checked="checked">
<label for="mdframework-custom_posts_n3-1">1</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n3]" id="mdframework-custom_posts_n3-2" value="2">
<label for="mdframework-custom_posts_n3-2">2</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n3]" id="mdframework-custom_posts_n3-3" value="3">
<label for="mdframework-custom_posts_n3-3">3</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n3]" id="mdframework-custom_posts_n3-4" value="4">
<label for="mdframework-custom_posts_n3-4">4</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n3]" id="mdframework-custom_posts_n3-5" value="5">
<label for="mdframework-custom_posts_n3-5">5</label>
</div>
<div class="explain">Test Third custom Post show/hide</div>
</div>
</div>
<div id="section-custom_posts_n4" class="section section-radio hidden">
<h4 class="heading">Test Fourth custom Post show/hide</h4>
<div class="option">
<div class="controls">
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n4]" id="mdframework-custom_posts_n4-0" value="0">
<label for="mdframework-custom_posts_n4-0">0</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n4]" id="mdframework-custom_posts_n4-1" value="1" checked="checked">
<label for="mdframework-custom_posts_n4-1">1</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n4]" id="mdframework-custom_posts_n4-2" value="2">
<label for="mdframework-custom_posts_n4-2">2</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n4]" id="mdframework-custom_posts_n4-3" value="3">
<label for="mdframework-custom_posts_n4-3">3</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n4]" id="mdframework-custom_posts_n4-4" value="4">
<label for="mdframework-custom_posts_n4-4">4</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n4]" id="mdframework-custom_posts_n4-5" value="5">
<label for="mdframework-custom_posts_n4-5">5</label>
</div>
<div class="explain">Test Fourth custom Post show/hide</div>
</div>
</div>
<div id="section-custom_posts_n5" class="section section-radio hidden">
<h4 class="heading">Test Fifth custom Post show/hide</h4>
<div class="option">
<div class="controls">
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n5]" id="mdframework-custom_posts_n5-0" value="0">
<label for="mdframework-custom_posts_n5-0">0</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n5]" id="mdframework-custom_posts_n5-1" value="1" checked="checked">
<label for="mdframework-custom_posts_n5-1">1</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n5]" id="mdframework-custom_posts_n5-2" value="2">
<label for="mdframework-custom_posts_n5-2">2</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n5]" id="mdframework-custom_posts_n5-3" value="3">
<label for="mdframework-custom_posts_n5-3">3</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n5]" id="mdframework-custom_posts_n5-4" value="4">
<label for="mdframework-custom_posts_n5-4">4</label>
<input class="of-input of-radio" type="radio" name="mdframework[custom_posts_n5]" id="mdframework-custom_posts_n5-5" value="5">
<label for="mdframework-custom_posts_n5-5">5</label>
</div>
<div class="explain">Test Fifth custom Post show/hide</div>
</div>
</div>
的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
}
答案 0 :(得分：0)
您需要更改：
$types = $('#section-how_many_custom_posts');
到
$types = $('.of-radio');
这是因为，您的ID是唯一的，并且您没有将该ID应用于您的单选按钮。您在所有单选按钮上都有公共类of-radio，因此您要做的是选择该类的所有元素，并根据哪个单选按钮显示所需的div点击了课程。
<强>更新
根据代码中新发现的错误，我已经更新了你的小提示：
更新2
这不是您原来的问题，但在您的一条评论中，您提到过您希望尝试将代码转换为循环。这是工作小提琴：