0

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

选择图片 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>
4

2 回答 2

1

navLeft（使用 CamelCase）是您的 DIV 的 ID，但您navleft在脚本中使用（不使用 Camelcase）。

你在隐藏navRight，如果你点击frame_right你的 JS 会navRight再次隐藏？这不合逻辑，还是？

于 2013-03-27T20:45:37.310 回答
0

我会使用 switch 语句来执行此操作，并默认使用 css 隐藏内容元素。 一个工作小提琴。不知道你的意思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;
}
于 2013-03-27T20:55:13.880 回答