javascript - 取消隐藏单选按钮选择上的 Div 标签

Question

我是 HTML/JQuery 新手，正在尝试根据单选按钮选择取消隐藏 div 标签。在下面的实例中，如果用户选择 SR readio 按钮，我想取消隐藏 s div - 同样，如果用户选择 C radio按钮，我想取消隐藏 C div

我将以下语法放在一起，但是当页面加载时，无论按下哪个单选按钮。两个 div 都不可见。

<script>
$(document).ready(function() {
    $("input[name$='src']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#src" + test).show();
    });
});
</script>

<Input type = 'Radio' Name ='src' value= 'sr'>SR<p>
    <Input type = 'Radio' Name ='src' value= 'C'>C
    <p><p>
    <div id="st" class="desc">
        SR:
        <select name="sp" id="SR" visible="false">
                <option selected="selected">All</option>
                <?php
                foreach ($qry2 as $SR) {
                        ?>
                        <option value="<?= $SR->SR ?>"><?= $SR->SR ?></option>
                <?php };
                ?>
        </select>
    </div>
    <div id="c" class="desc" visible="false">
        C:
        <select name="C" id="C">
                <option selected="selected">All</option>
                <?php
                foreach ($qry1 as $name) {
                        ?>
                        <option value="<?= $name->C ?>"><?= $name->C ?></option>
                <?php };
                ?>
        </select>
    </div>

Answer 1

看起来你已经快明白了。

.desc 元素的 ID 与您根据单击的输入值构建的选择器不匹配。例如，如果我单击“SR”按钮，代码会尝试显示 ID 为“srcSR”的元素，但该元素不存在。

这是一个调整后的示例:

$(document).ready(function() {
  $("input[name$='src']").click(function() {
    var test = $(this).val();
    $("div.desc").hide();
    $("#list_" + test).show();
  });
})

.desc {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<Input type='Radio' Name='src' value='sr'>SR
<Input type='Radio' Name='src' value='C'>C

<div id="list_sr" class="desc">
  SR:
  <select name="sp" id="SR" visible="false">
    <option selected="selected">All</option>
    <option value="">STUFF</option>
  </select>
</div>
<div id="list_C" class="desc" visible="false">
  C:
  <select name="C" id="C">
    <option selected="selected">All</option>
    <option value="">STUFF</option>
  </select>
</div>