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>

編集: HTML 要素の構造が失われるため、CSS のアイデアは好きではありません。ディフェンダー、ミッドフィールダーはすべて同じリストに入るだろうし、それはあまり良いことではない。一方で、それを実装する方法がいくつかあるかもしれませんが、多くは本当に必要なものに依存します。例えば：

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 では機能しません。これをもう少し調査してみてください。もう 1 つのアイデアは、css の絶対配置を使用することです。たとえば、jquery を介して適切なクラスを追加すると、1 つの項目にたとえば class="midfielder second" が含まれ、これを「midfielder」クラスの「top」CSS スタイルと「second」クラスの「left」css スタイルのように解釈します。 .

于 2012-06-25T11:13:06.867 に答える