根据所选的下拉框更改div [英] Change div according to dropdown boxes selected

问题描述

尝试仅显示< div> 与表格中所选的下拉框相匹配。

Trying to display only <div> that matches the dropdown boxes selected in the form.

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

The form gets generated using a Form class, and options are in tables in the database (race, class). In the end looks like this:

<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类。

My controller calls in the Avatar, CharacterClass, Race classes.

我的头像表包含将ID存储到 race.id 和<$的列c $ c> class.id table.id_column's。

My avatar table has columns that store the IDs to the race.id, and class.id table.id_column's.

# 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> 's：

<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> 。

I am stuck at this point. I am not sure how to figure out the jQuery to hide/show the correct <div>.

推荐答案

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

This isn't well written by any means: http://jsfiddle.net/dz5gh7wo/2/

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

(UPDATE: slightly more maintainable example http://jsfiddle.net/dz5gh7wo/7/)

你想做的是添加在输入字段更改时触发的on change事件侦听器。

What you want to do is to add an on change event listener that fires when the input fields change.

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

在这里，我以非常草率的方式将它添加到您的所有字段中，但这仅用于教育目的。它调用 buildCharacter 函数。

Here I added it to all of your fields in a very sloppy way, but this is just for educational purposes. It calls a buildCharacter function.

然后我们定义该函数。

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

You will want to hide all of your unused class divs with some CSS

.class-info {
  display: none
}

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

and finally call build character on page load

buildCharacter （）;

您需要在每个角色显示上安排课程，以便随意显示和隐藏它们。

You will need classes on each of your character displays so that you can show and hide them at will.

female-goblin-warrior

这篇关于根据所选的下拉框更改div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！