问题
Problem solved but if you have a more efficent solution you are more then welcome.
I know that questions like this have been asked before, but I am having trouble getting this to work.
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.
[This is the code I wrote][1] to test my idea but it doesn't work.
I repeat, I can change the jQuery part, but not the HTML. What am I doing wrong?
For the one that don't want to go to jsfiddle here is the code:
This is the code Corrected by: @Zakary Kniebel
Or a 'ciclic' version based on 'FOR' written by @Zakary Kniebel
Actually the code will do this:
if 1 is selected it shows only 1 section, if 2 is selected it shows only 2 sections, and so on.
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
<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
}
回答1:
You need to change:
$types = $('#section-how_many_custom_posts');
to
$types = $('.of-radio');
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.
Updated Fiddle
UPDATE
Based on the newly discovered bug in your code, I have updated your fiddle with the fix:
Updated Fiddle 2
UPDATE 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:
Updated Fiddle 3
来源：https://stackoverflow.com/questions/15993134/how-to-show-2-or-more-div-based-of-radio-selection-with-jquery