如何显示2个或更多基于jQuery的单选的div? [英] How to show 2 or more div based of radio selection with jquery?
问题描述
我知道以前已经问过类似的问题，但是我很难使它起作用.
I know that questions like this have been asked before, but I am having trouble getting this to work.
我正在尝试根据广播选择显示几个div. HTML由wptheming option-framework自动生成，因此无法更改.我可以更改的是我尝试编写的jQuery函数，没有运气.
I am trying to show a few div(s) based on a radio selection. The HTML is automatically generated by wptheming option-framework so I can't change it. What I can change is the jQuery function that I tried to write, without luck.
[这是我编写的代码] [1]，用于测试我的想法，但不起作用.
[This is the code I wrote][1] to test my idea but it doesn't work.
我再说一遍，我可以更改jQuery部分，但不能更改HTML.我在做什么错了?
I repeat, I can change the jQuery part, but not the HTML. What am I doing wrong?
对于不想去jsfiddle的人，这里是代码:
For the one that don't want to go to jsfiddle here is the code:
这是由以下人员纠正的代码: @Zakary Kniebel
或由@Zakary Kniebel编写的基于'FOR'的'ciclic'版本
Or a 'ciclic' version based on 'FOR' written by @Zakary Kniebel
实际上，代码将执行此操作:
Actually the code will do this:
如果选择1，则仅显示1个部分， 如果选择2，则仅显示2个部分， 等等.
if 1 is selected it shows only 1 section, if 2 is selected it shows only 2 sections, and so on.
副作用，不是必需的，但很好，在第一次选择后，无论您选择多少，其他任何<section>都将消失，让您专注于单选按钮，如果不需要此效果，只需将其放置: c2>在此之前:
Side effect, not needed but nice, after first selection, no matter the number you choose, any other <section> will vanish to let you focus on radio button, if you don't need this effect just place this: // before of this:
$(".section").not("#section-how_many_custom_posts").hide();
或者写下不会消失的部分的选择器.
Or write down the selector for section that won't vanish.
HTML
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
CSS
.hidden {
display:none
}
推荐答案
您需要更改:
$types = $('#section-how_many_custom_posts');
到
$types = $('.of-radio');
这是因为，您的ID是唯一的，并且您没有将该ID应用于您的单选按钮.您在所有单选按钮上都具有通用的类of-radio，因此您要做的是选择该类的所有元素，并根据单击该类的哪个单选按钮来显示所需的div.
This is because, your IDs be unique and you don't have that ID applied to your radio buttons. You have the common class of-radio on all of your radio buttons, so what you want to do is select that all of the elements with that class and display the desired divs based on which radio button with that class was clicked.
更新
基于您代码中新发现的错误，我用以下修复程序更新了您的小提琴:
Based on the newly discovered bug in your code, I have updated your fiddle with the fix:
更新2
这不是您最初的问题，但是在您的评论之一中，您提到希望将代码变成循环.这是工作的小提琴:
This was not your original question, but in one of your comments, you mentioned that you would like to try to turn your code into a loop. Here is the working fiddle:
这篇关于如何显示2个或更多基于jQuery的单选的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
