यह किसी भी तरह से अच्छी तरह से नहीं लिखा गया है: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();
};
आप अपने सभी अप्रयुक्त वर्ग divs को कुछ CSS के साथ छिपाना चाहेंगे
.class-info {
display: none
}
और अंत में पेज लोड होने पर बिल्ड कैरेक्टर को कॉल करें
buildCharacter();
आपको अपने प्रत्येक चरित्र प्रदर्शन पर कक्षाओं की आवश्यकता होगी ताकि आप उन्हें अपनी इच्छानुसार दिखा और छिपा सकें।
female-goblin-warrior
