Question

希望你能帮忙！

我正在尝试构建一个非常基本的角色构建器，允许人们使用drop-down框选择头部，身体和脚部。三个drop-down框将对应于三个部分，允许此人选择身体部位。

使用我在网上找到的代码，我已经设法构建了我需要的代码，但我只能使一个代码段工作。

这是我目前的代码：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Character Selector</title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
    <style>
        .details_div {
            display: none;
        }
        
        #details_book {}
        
        #details_movie {}
    </style>

</head>

<body>
    <script type="text/javascript">
        function showDiv() {
            // hide any showing
            $(".details_div").each(function() {
                $(this).css('display', 'none');
            });

            // our target
            var target = "#details_" + $("#test_select").val();

            // does it exist?
            if ($(target).length > 0) {
                // show it
                $(target).css('display', 'block');
            }
        }

        $(document).ready(function() {

            // bind it
            $("#test_select").change(function() {
                showDiv();
            });

            // run it automagically
            showDiv();
        });
    </script>

    <div id="head">
        <div id="details_head_tchoukball" class="details_div">Tchoukball Head</div>
        <div id="details_head_surfer" class="details_div">Surfer Head</div>
        <div id="details_head_photo" class="details_div">Photo Head</div>
    </div>

    <div id="selectors">
        <select id="test_select">
            <option value="">- Select Head - </option>
            <option value="head_tchoukball" selected="selected">Tchoukball</option>
            <option value="head_surfer">Surfer</option>
            <option value="head_photo">Photo</option>
        </select>
    </div>

</body>

</html>

每个div（取决于片段）最终会有一个与当前文本对应的图像。

有人能告诉我哪里出错了吗？

非常感谢！

使用下拉框选择Div

0 个答案: