Question

我有4个盒子，a，b，c，d，如果我是用户选择盒子，我希望它能够做到以下几点;

选择图片加载内容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？这不符合逻辑，或者？

Answer 2

我会使用switch语句执行此操作，并默认使用css隐藏内容元素。 A working fiddle。不知道你对frame_without的意思。也许只是为了展示一切，就像现在一样。

$(document).ready(function(){
$('input[name="framework"]').change(function() {
    $('#navLeft, #navRight').hide();

    switch($('input[name="framework"]:checked').attr('id')) {
        case "frame_left":
           $("#navLeft").show();
            break;
        case "frame_right":
            $("#navRight").show();
            break;
        case "frame_both":
           $("#navLeft, #navRight").show();
            break;
         case "frame_without":
            //Dont know what here should happen
            break;
    }
});
});

要隐藏内容的CSS：

#navLeft, #navRight {
    display: none;
}

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

2 个答案: