Question

嗨，我对网络开发还很陌生，并且陷入了我自己设定的第一个项目。

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

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

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

e.g。对于足球，阵型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类

Answer 1

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

<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样式

动态图像放置帮助 - CSS / javascript / jquery？

1 个答案: