Попытка отобразить только <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.
# 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> .
Это плохо написано любым способом: 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(); };
Вы захотите скрыть все неиспользуемые div класса с помощью CSS
.class-info { display: none }
и, наконец, вызвать символ сборки при загрузке страницы
buildCharacter();
Вам понадобятся классы на каждом из ваших символов, чтобы вы могли показывать и скрывать их по своему усмотрению.
female-goblin-warrior