0

ゲームのフォーラムで、誰かが呪文を「生成」する方法をリクエストしました。混乱するかもしれませんが、呪文を「生成」する必要がある理由は次のとおりです。このゲーム（トピアオンライン）のすべての呪文は、ユーザーがコーディングする必要があります。（または他のユーザーから購入）。したがって、コーディングが苦手な人は、優れたカスタム スペルを使用できません。ここで簡単なアプリを作りました（JSFiddle）

これは、呪文の種類 (火、水など) のユーザー入力を受け取り、その種類に固有の呪文の形式を表示します。IRC チャット (ゲームの開発者) で、コードを小さくするために Knockout を使用するように言われました。私はノックアウトを使用したことがありません。ユーザーが前のドロップダウン リストで特定のオプションを選択したときにカスタム ドロップダウン リストを表示する方法の例/リンクを誰かが教えてくれるかどうか疑問に思っていました。例えば：

これは、ページに表示される唯一のドロップダウンです。

|-呪文選択-|

ユーザーが自分の呪文として Fire を選択したとしましょう。ページは次のようになります。

|火事|

|-呪文の形を選択-|

上記のドロップダウンのオプションは

|ファイアブレット - ティア1| |ファイアボール - ティア2| |ファイアウォール - ティア 3|

ユーザーが火を選択した場合にのみ、特定の「スペルの選択フォーム」ドロップダウンを表示するにはどうすればよいですか? （彼らが水を選択した場合、それは呪文の別のカスタム形式を表示します。土、空気などと同じです）、KnockOutを使用していますか？

ありがとうございます。混乱を招きましたら申し訳ありません。質問があればコメントしてください

JSFiddle が機能していない場合は、次の HTML コードもあります。

<select size="1" id="Spell" title="" name="Spell">
<option value="">-Select Your Spell Type-</option>
<option value="fire">Fire</option>
<option value="lightning">Lightning</option>
<option value="plasma">Plasma</option>
<option value="water">Water</option>
<option value="earth">Earth</option>
<option value="air">Air</option>
</select>
<div class="container">
<div class="fire">
    <select class="second-level-select">
        <option value="">-Select The Form of the Spell-</option>
        <option value="fireForm1">Fire Bullet - Tier 1</option>
        <option value="fireForm2">Fire Ball - Tier 2</option>
        <option value="fireForm3">Fire Wall - Tier 3</option>
    </select>
</div>
<div class="lightning">
    <select class="second-level-select">
        <option value="">-Select The Form of the Spell-</option>
        <option value="lightningForm1">Electrified Bullet - Tier 1</option>
        <option value="lightningForm2">Smite - Tier 2</option>
        <option value="lightningForm3">Electrified Rain - Tier 3</option>
    </select>
</div>
<div class="plasma">
    <select class="second-level-select">
        <option value="">-Select The Form of the Spell-</option>
        <option value="plasmaForm1">Plasma Bullet - Tier 1</option>
        <option value="plasmaForm2">Ball o' Plasma - Tier 2</option>
        <option value="plasmaForm3">Wall of Plasma - Tier 3</option>
    </select>
</div>
<div class="water">
    <select class="second-level-select">
        <option value="">-Select The Form of the Spell-</option>
        <option value="waterForm1">Water Shove - Tier 1</option>
        <option value="waterForm2">Water Fountain - Tier 2</option>
        <option value="waterForm3">Tsunami - Tier 3</option>
    </select>
</div>
<div class="earth">
    <select class="second-level-select">
        <option value="">-Select The Form of the Spell-</option>
        <option value="earthForm1">Rock Bullet - Tier 1</option>
        <option value="earthForm2">Ball of Rock - Tier 2</option>
        <option value="earthForm3">Avalanche - Tier 3</option>
    </select>
</div>
<div class="air">
    <select class="second-level-select">
        <option value="">-Select The Form of the Spell-</option>
        <option value="airForm1">Air Blast - Tier 1</option>
        <option value="airForm2">Levitate - Tier 2</option>
        <option value="airForm3">Funnel Cloud - Tier 3</option>
    </select>
</div>
</div>
    <div class="second-level-container">
<div class="fireForm1">Code will be here for Fire Bullet</div>
<div class="fireForm2">Code will be here for Fire Ball</div>
<div class="fireForm3">Code will be here for Fire Wall</div>
<div class="lightningForm1">Code will be here for Electrified Bullet</div>
<div class="lightningForm2">Code will be here for Smite</div>
<div class="lightningForm3">Code will be here for Electrified Rain</div>
<div class="plasmaForm1">Code will be here for Plasma Bullet</div>
<div class="plasmaForm2">Code will be here for Ball o' Plasma</div>
<div class="plasmaForm3">Code will be here for Plasma Wall</div>
<div class="waterForm1">Code will be here for Water Shove</div>
<div class="waterForm2">Code will be here for Water Fountain</div>
<div class="waterForm3">Code will be here for Tsunami</div>
<div class="earthForm1">Code will be here for Rock Bullet</div>
<div class="earthForm2">Code will be here for Ball of Rock</div>
<div class="earthForm3">Code will be here for Avalanche</div>
<div class="airForm1">Code will be here for Air Blast</div>
<div class="airForm2">Code will be here for Levitate</div>
<div class="airForm3">Code will be here for Funnel Cloud</div>

そして、この次の JS コード:

$(document).ready(function () {
$('#Spell').bind('change', function () {
    var elements = $('div.container').children().hide(); // hide all the elements
    var value = $(this).val();

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
    }
}).trigger('change');

$('.second-level-select').bind('change', function () {
    var elements = $('div.second-level-container').children().hide(); // hide all the elements
    var value = $(this).val();

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
    }
}).trigger('change');
});
4

0 に答える 0