2

まず第一に、私は jQuery と HTMl5/CSS3 にかなり慣れていないため、おそらくこれに対する簡単な解決策はあるものの、インターネット上で見つけることができませんでした。

API 呼び出しを使用して WoW ギルド メンバーの名前をクラスを持つ UL にプルし、ゲーム内のクラスの名前を適切に色付けする PHP スクリプトがあります。ここで、その UL を選択ボックスに変換して、ユーザーがサイトに登録するときにキャラクターを選択できるようにします (将来的には、プレイヤーがトゥーンの 1 つを確実に選択できるようにするためのセキュリティの強化が計画されています)。

選択ボックスのスタイルをフォームの残りの部分に合わせて、クラスの色が選択に表示されるようにします。なんらかの形式の DIV をだまして使用する必要があると思いますが、探しているものを正確に実行するスクリプトを見つけることができませんでした。私の UL の形式は次のようになります。

    <ul id="charNameList">
        <li><span class="priest">Alastriia</li>
        <li><span class="paladin">Aleathà</li>
        <li><span class="warrior">Arghra</li>
        <li><span class="druid">Autumnal</li>
        <li><span class="rogue">Beerisbadmmk</li>
        <li><span class="priest">Biip</li>
        <li><span class="mage">Blazeglory</li>
        <li><span class="druid">Blaçk</li>
        <li><span class="warlock">Braylna</li>
        <li><span class="warlock">Brileah</li>
        ...
    </ul>

私の Google スキルでは見つけられなかったチュートリアルを教えてくれるだけでも、どんな助けも大歓迎です。ありがとうございました ：）

4

2 に答える 2

3

私はあなたがこのようなものをもっと探していると信じています:

HTML

<h3 id="charNameListHeader">Select Your Toon: <span id="selectedToon"></span></h3>
<ul id="charNameList" style="display:none;">
    <li data-toonID="1"><span class="priest">Alastriia</li>
    <li data-toonID="2"><span class="paladin">Aleathà</li>
    <li data-toonID="3"><span class="warrior">Arghra</li>
    <li data-toonID="4"><span class="druid">Autumnal</li>
    <li data-toonID="5"><span class="rogue">Beerisbadmmk</li>
    <li data-toonID="6"><span class="priest">Biip</li>
    <li data-toonID="7"><span class="mage">Blazeglory</li>
    <li data-toonID="8"><span class="druid">Blaçk</li>
    <li data-toonID="9"><span class="warlock">Braylna</li>
    <li data-toonID="10"><span class="warlock">Brileah</li>
</ul>
<input type="hidden" id="selectedToonInput" />

JS

$('#charNameListHeader').click( function() {
    $(this).next().toggle();
});
$('#charNameList li').click( function() {
    var selectedValue = $(this).attr('data-toonID');
    $('#selectedToonInput').val(selectedValue);
    var newToon = $(this).children('span').clone();
    $('#selectedToon').html(newToon);
    $('#charNameList').hide();
});

JS フィドル: http://jsfiddle.net/TQNfQ/2/

そこから、あなたはそれをあなたが見たいように見せるだけです. toonID は非表示の入力に設定されるため、後で入力を処理するときに取得できます。

于 2012-05-04T19:05:31.033 に答える
0

select 要素を使用しないのはなぜですか? これを行う最も簡単な方法<li>の 1 つは、アクティブな要素以外のすべての要素を非表示にすることです。それは次のようになります。

$('ul#charNameList li').hide().toggle(function(){
    $(this).siblings().hide();
}, function(){
    $(this).siblings().show();
}).first().show()
于 2012-05-04T18:37:18.443 に答える