2

首先，我对 jQuery 和 HTMl5/CSS3 还很陌生，所以虽然可能有一个简单的解决方案，但我一直无法在互联网上找到一个。

我有一个 PHP 脚本，它使用 API 调用将我的 WoW 公会成员的名称提取到一个 UL 中，该 UL 带有一个类，可以正确地为游戏中类的名称着色。现在，我想把这个 UL 变成一个选择框，这样用户就可以在注册网站时选择他们的角色（更多的安全措施可以确保玩家选择他们的卡通人物之一）。

我希望选择框的样式适合我的表单的其余部分，并且我希望类颜色显示在选择中。我假设我必须作弊并使用某种形式的 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

为什么不使用选择元素？我认为最简单的方法<li>之一是隐藏除活动元素之外的所有元素。看起来像这样：

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