0

嗨，我对 Web 开发相当陌生，并且被困在我自己设定的第一个项目中。

我正在尝试创建一个团队选择页面，可以在其中选择不同的团队阵型，并且图像将根据所选阵型动态排序。

我不知道这是否可以仅使用 CSS 来实现，或者我是否必须将它与 javascript 或 jquery 结合使用（我正在尝试学习所有 3 个，所以这是一个陡峭的学习曲线）。

我想我可以在 html ul li 中创建一个列表，然后根据所选的格式动态更改每个 li 的类。

例如，对于足球，阵型 442 将具有：

GK
DEF DEF DEF DEF
MID MID MID MID
STR STR

但如果编队更改为 541，则图像将更改为显示

GK
DEF DEF DEF DEF DEF
MID MID MID MID
STR

任何人都可以向我提供有关此问题的可能解决方案的提示，我将进一步阅读以尝试理解。
例如，我是否需要为每种形成类型创建一个 javascript 函数，为每个 li 元素提供一个 id，并根据所选形成为每个元素设置 CSS
例如，我是否需要使用 jquery 根据所选形成为每个 li 元素添加 CSS 类

4

1 回答 1

0

这是一段代码，可以帮助您满足您的需求。

<div>
    <ul id="ulGoalkeepers"><li>GK</li></ul>
    <hr />
    <ul id="ulDefenders"></ul>
    <hr />
    <ul id="ulMidfielders"></ul>
    <hr />
    <ul id="ulStrikers"></ul>
</div>
<select id="ddlFormation">
    <option></option>
    <option value="4-4-2">4-4-2</option>
    <option value="4-5-1">4-5-1</option>
</select>
<script type="text/javascript" language="javascript">
    function formationChanged(){
        var formation = $("#ddlFormation").val();
        if (formation != undefined && formation != '') {
            $("#ulDefenders").empty();
            $("#ulMidfielders").empty();
            $("#ulStrikers").empty();

            var parts = formation.split('-');
            var defenders = parts[0];
            var midfielders = parts[1];
            var strikers = parts[2];

            for (var i = 0; i < defenders; i++) {
                $("#ulDefenders").append('<li>DEF</li>');
            }
            for (var i = 0; i < midfielders; i++) {
                $("#ulMidfielders").append('<li>MID</li>');
            }
            for (var i = 0; i < strikers; i++) {
                $("#ulStrikers").append('<li>STR</li>');
            }
        }
    }

    $(document).ready(function () {
        $("#ddlFormation").bind("change", formationChanged);
    });
</script>

编辑： 我不喜欢 CSS 的想法，因为你失去了 html 元素的结构。后卫、中场都将在同一个名单中，这不是很好。另一方面，可能会有一些想法如何实现它，并且很大程度上取决于您真正需要什么。例如：

CSS：

    .team div
    {
        float: left;
        width: 50px;
    }
    .team div.first
    {
        clear: both;    
    }

HTML：

    <div class="team">
        <div class="goalkeeper">GK</div>
        <div class="defender first">DEF</div>
        <div class="defender">DEF</div>
        <div class="defender">DEF</div>
        <div class="defender">DEF</div>
        <div class="midfielder first">MID</div>
        <div class="midfielder">MID</div>
        <div class="midfielder">MID</div>
        <div class="midfielder">MID</div>
        <div class="striker first">STR</div>
        <div class="striker">STR</div>
    </div>

但这在 IE7 中不起作用。您可以尝试对此进行更多调查。另一个想法是使用css绝对定位。例如，您通过 jquery 添加适当的类，因此一个项目将具有例如 class="midfielder second" 并且您在 css 中将其解释为“midfielder”类的“top”css 样式和“second”类的“left”css 样式.

于 2012-06-25T11:13:06.867 回答