javascript - 根据单选按钮输入加载动态内容

Question

我有 4 个盒子，a、b、c、d，如果我选择盒子 a，我希望它执行以下操作；

选择图片加载内容1

选择图片b加载内容2

选择图片c加载内容3

选择图片d加载内容4

我希望在单击单选按钮之前隐藏所有可能加载的内容。到目前为止它都是隐藏的，但是当单击单选按钮时没有内容加载。

谢谢!

<div id="framework">
    <div class="element">
        <img style="float:left;" src="img/left.png" />
        <img style="padding-left:25px; float:left;" src="img/right.png" />
        <img style="padding-left:25px; float:left;" src="img/both.png" />
        <img style="padding-left:25px; float:left;" src="img/without.png" />
    </div>
    <form class="actions">
        <div style="clearfix:none;" class="confirm">
            <input type="radio" id="frame_left" name="framework">
        </div>
        <div style="clearfix:none;" class="confirma">
            <input type="radio" id="frame_right" name="framework">
        </div>
        <div style="clearfix:none;" class="confirmb">
            <input type="radio" id="frame_both" name="framework">
        </div>
        <div style="clearfix:none;" class="confirmc">
            <input type="radio" id="frame_without" name="framework">
        </div>
    </form>
</div>
<script>
    $(document).ready(function() {
        // do your checks of the radio buttons here and show/hide what you want to
        $("#navLeft").hide();
        $("#navRight").hide();
        if ($("#frame_left:checked").length > 0) {
            $("#navLeft").hide();
        }

        // add functionality for the onclicks here
        $("#frame_left").click(function() {
            $("#navleft").show();
        });

        $("#frame_right").click(function() {
            $("#navRight").hide();
        });
    });
</script>
<img id="navLeft" src="img/left.png" />
<img id="navRight" src="img/right.png" />
</div>

Answer 1

navLeft(使用 CamelCase)是您的 DIV 的 ID，但您在脚本中使用的是 navleft(不使用 CamelCase)。

您正在隐藏 navRight，如果您单击 frame_right，您的 JS 将再次隐藏 navRight？这不合逻辑，还是？