問題は解決しましたが、より効率的な解決策があれば大歓迎です。
このような質問が以前にも寄せられたことは知っていますが、これを機能させるのに苦労しています。
ラジオの選択に基づいていくつかの div を表示しようとしています。HTML は によって自動的に生成されるwptheming option-frameworkため、変更することはできません。私が変更できるのは、運が悪かったので、私が書こうとした jQuery 関数です。
[これは私が書いたコードです][1] 私のアイデアをテストするためのものですが、うまくいきません。
繰り返しますが、jQuery 部分は変更できますが、HTML は変更できません。私は何を間違っていますか？
jsfiddle に行きたくない人のために、コードは次のとおりです。
これはコードです。修正者: @Zakary Kniebel
または、 @Zakary Kniebel によって書かれた「FOR」に基づく「ciclic」バージョン
実際、コードはこれを行います：
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
}