هناك قائمة منسدلة على صفحتي ، وهناك مربع إدخال نص ومربع تحميل صورة. يتم عرض مربع إدخال النص بشكل افتراضي ، بينما يتم إخفاء مربع تحميل الصورة.
لنفترض أن هناك عنصرين A و B في القائمة المنسدلة ، أريد تحقيق هذا التأثير: عند النقر فوق A ، يتم عرض مربع إدخال النص ويتم إخفاء مربع إدخال الصورة ؛ عند النقر فوق B ، يتم عرض مربع تحميل الصورة ويتم إخفاء مربع إدخال النص . كيف تنفذها؟
عند التصحيح مع Firebug ، وجدت أنه سيتم تنفيذ وظائف نقرة قليلة فقط عند تحميل صفحة HTML. بعد تحميل الصفحة ، انقر فوق عنصر القائمة المنسدلة ، ولن يتم تنفيذ نقاط التوقف هذه. ماذا يحدث هنا؟
رمز JS الخاص بي كما يلي (محدد في القسم <head>):
<script type = "text/javaScript"> // image_upload هو معرف مربع تحميل الصورة. في البداية ، إخفاءه $ (وثيقة) .READY (function () {$ ("#image_upload"). Hide () ؛}) ؛ // text_only هو عنصر قائمة منسدلة. أريد أن تنفذ هذه الوظيفة مربع إدخال النص text_input عند النقر فوق عنصر القائمة // إظهار مربع إدخال النص text_input ، إخفاء مربع تحميل الصورة image_upload $ ('#text_only'). انقر فوق (وظيفة (e) {$ ("#text_input"). عنصر القائمة المنسدلة. عند النقر فوقه ، يتم إخفاء مربع النص ويتم عرض مربع تحميل الصورة. */$ ('image_only'). انقر فوق (function () {$ ("#text_input"). Hide () ؛ $ ("#image_upload"). show () ؛}) ؛ </script>الرمز الكامل كما يلي ، أخشى أن المعلومات المذكورة أعلاه ليست كافية:
<! doctype html> <html lang = "en"> <head> <title> مرحبًا ، العالم </title> <meta name = "viewport" content = "width = width device ، scale scale = 1.0"> <meta http-equiv = "content-type" content = "text/html ؛ HREF = "CSS/BOOTSTRAP.CSS" rel = "STYLESHEET" media = "screen"> <script src = "http://code.jquery.com/jquery.js src = "js/bootstrap-filepload.js"> </script> <style>. {margin-top: 30px ؛ display: table ؛ margin-left: auto ؛ hargin-right: auto ؛} body {margin: 0 ؛ background: url ('img/955.jpg' 34px ؛} </style> <script type = "text/javaScript"> $ (document). ready ( function () {$ ("#image_upload"). Hide () ؛}) ؛ $ ('#text_only'). انقر فوق (وظيفة (e) {$ ("#text_input"). show () ؛ $ ("#image_upload"). Hide () ؛ k (function () {$ ("#text_input"). Hide () ؛ $ ("#image_upload"). show () ؛}) ؛ $ ('superized'). انقر فوق (وظيفة () {$ ("#text_input"). show () ؛ $ ( type = "text/javaScript"> </script> </head> <body> <h1> مرحبًا ، العالم </h1> <viv> <viv> <ul> <ul> <li> <a href = "#" id = "text_only" href = "#"> text </a> </li></ul> <li> <a data-toggle = "sropown" href = "#"> multimodal <b> </b> </a> <ul> <li> <a id = "text_only" href = "#" data-toggle = "tropdown" href = "#"> multimodal <b> </b> </a> <ul> <li> <a id = "superized" href = "#"> مرفوع </a> </li> <li> <a id = "undervised" href = "#" navbar-> <viv> <Porm> <fieldset> <input id = "text_input" type = "text" placeholder = "text input"> </br> <div id = "image_upload" data-provides = "fileupload"> <!-<input type = "hidden" value = "" " <span> </span> </viv> <span> <span> حدد ملف </span> <span> تغيير </span> <إدخال type = "file"/> </span> <a href = "#" data-dismiss = "fileupload"> إزالة </a> </viv> </div> </body> </html>Bootstrap ينقر على عنصر القائمة المنسدلة ويعرض رمز تطبيق مربع الإدخال الجديد. آمل أن يكون ذلك مفيدًا للجميع!