0

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

我知道以前有人问过这样的问题，但我无法让它发挥作用。

我正在尝试根据无线电选择显示一些 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
}
4

1 回答 1

0

你需要改变：

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

至

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


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

更新小提琴


更新

根据您代码中新发现的错误，我已经更新了您的修复方法：

更新小提琴 2


更新 2

这不是您最初的问题，但在您的一条评论中，您提到您想尝试将您的代码变成一个循环。这是工作小提琴：

更新小提琴 3

于 2013-04-13T21:35:26.787 回答