根据选择的下拉框更改 div

Question

尝试仅显示与表单中选择的下拉框匹配的<div>。

表单是使用 Form 类生成的，选项位于数据库的表中（race、class）。最后是这样的：

<form action="" method="post" name="create" target="_top">
    <fieldset>
        <ul class="create">
            <li>
                <label class="label" for="character_name">Character Name:</label>
                <input class="text" type="text" name="character_name" id="character_name" />
            </li>
            <li>
                <label class="label" for="character_gender">Gender:</label>
                <select class="character_gender select" name="character_gender" id="character_gender">
                    <option class="option" value="1">Female</option>
                    <option class="option" value="2">Male</option>
                </select>
            </li>
            <li>
                <label class="label" for="character_race">Character Race:</label>
                <select class="character_race select" name="character_race" id="character_race">
                    <option class="option" value="1">Goblin</option>
                    <option class="option" value="2">Human</option>
                    <option class="option" value="3">Undead</option>
                </select>
            </li>
            <li>
                <label class="label" for="character_class">Character Class:</label>
                <select class="character_class select" name="character_class" id="character_class">
                    <option class="option" value="1">Warrior</option>
                    <option class="option" value="2">Wizard</option>
                </select>
            </li>
            <li>
                <input class="submit-create-character" type="submit" name="create_character" value="Create" />
            </li>
        </ul>
    </fieldset>
</form>

我的控制器调用 Avatar、CharacterClass、Race 类。

我的avatar 表有将ID 存储到race.id 和class.id table.id_column 的列。

# Get all the avatars in the `avatars` table.
$avatars=$avatar_obj->getAllAvatars();

foreach($avatars as $avatar)
{
    # Get the image information from the database, and set them to data members.
    $avatar_obj->getThisImage($avatar->image_id);
    # Set the Image object to a variable.
    $image_obj=$avatar_obj->getImageObj();
    # Set the image file name to a variable.
    $image_file_name=$image_obj->getFileName();

    # Get the class info from the database and set the data members.
    $class_obj->getThisCharacterClass($avatar->class_id);
    # Get the race info from the database and set the data members.
    $race_obj->getThisRace($avatar->race_id);

    echo '<div class="class-info">',
        '<div class="avatar-box">',
            '<img src="'.IMAGES_PATH.$image_file_name.'" alt="'.$image_obj->getTitle().'" />',
        '</div>';
        echo $race_obj->getDescription().'<br>';
        echo $class_obj->getDescription();
    echo '</div>';
}

这显示了一堆<div>的：

<div class="class-info">
    <div class="avatar-box"><img src="Female.Goblin.Warrior.gif" alt="Female Warrior" /></div>
    Goblin description.<br>
    Warrior Description
</div>
<div class="class-info">
    <div class="avatar-box"><img src="Male.Goblin.Warrior.gif" alt="Male Warrior" /></div>
    Goblin description.<br>
    Wizard Description
</div>
<div class="class-info">
    <div class="avatar-box"><img src="Female.Human.Warrior.gif" alt="Female Warrior" /></div>
    Human description.<br>
    Warrior Description
</div>
<div class="class-info">
    <div class="avatar-box"><img src="Male.Human.Warrior.gif" alt="Male Warrior" /></div>
    Human description.<br>
    Wizard Description
</div>
<div class="class-info">
    <div class="avatar-box"><img src="Female.Undead.Warrior.gif" alt="Female Warrior" /></div>
    Undead description.<br>
    Warrior Description
</div>
<div class="class-info">
    <div class="avatar-box"><img src="Male.Undead.Warrior.gif" alt="Male Warrior" /></div>
    Undead description.<br>
    Wizard Description
</div>

（还有更多）

我被困在这一点上。我不确定如何找出 jQuery 来隐藏/显示正确的 <div>。

Answer 1

这无论如何都写得不好：http://jsfiddle.net/dz5gh7wo/2/

（更新：更易于维护的示例http://jsfiddle.net/dz5gh7wo/7/）

您要做的是添加一个更改事件侦听器，该侦听器在输入字段更改时触发。

$('#character_race, #character_gender, #character_class').on('change', buildCharacter);    

在这里，我以一种非常草率的方式将其添加到您的所有领域，但这仅用于教育目的。它调用了一个buildCharacter 函数。

然后我们定义那个函数。

var buildCharacter = function() {
    var charRace = $('#character_race :selected').text(),
        charGender = $('#character_gender :selected').text(),
        charClass = $('#character_class :selected').text(),
        cssStr = charGender+'-'+charRace+'-'+charClass;
    $('.class-info').hide();
    $('.'+cssStr.toLowerCase()).show();
};

您将希望使用一些 CSS 隐藏所有未使用的类 div

.class-info {
  display: none
}

最后在页面加载时调用构建字符

buildCharacter();

您将需要在每个角色显示器上使用类，以便您可以随意显示和隐藏它们。

female-goblin-warrior