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表包含用于存储race.id和class.id table.id_column的ID的列。

# 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/）

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

$('#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

根据所选的下拉框更改div

1 个答案: