jQuery implements automatic display and hiding of forms by type

  • 2020-05-17 04:48:12
  • OfStack

The e jquery implementation form according to the radio button to carry out the field animation switch, written yesterday, feel that the original school wrote js/jquery has a great improvement. It is possible to streamline the code while maximizing scalability.

html


<div class="control-group">
                    <label class="control-label"> Type: </label>
                    <div class="controls control-row-auto" id="type">
                    </div>
                    <span class="auxiliary-text"></span>
                </div>
                <div class="control-group ctype ctype1 ctype2">
                    <label class="control-label"> Column template: </label>
                    <div class="controls">
                        <select name="column_tpl" class="input">
                        </select>
                    </div>
                    <span class="auxiliary-text"></span>
                </div>
                <div class="control-group ctype ctype1">
                    <label class="control-label"> Article template: </label>
                    <div class="controls">
                        <select name="article_tpl" class="input">
                        </select>
                    </div>
                    <span class="auxiliary-text"></span>
                </div>
                <input type="hidden" name="tpl" id="tpl" value="" />
                <div class="control-group ctype ctype3" style="display: none;">
                    <label class="control-label"><s>*</s> Column link: </label>
                    <div class="controls">
                        <input name="url" type="text" class="input-large" data-rules="{required:true,minlength:1,maxlength:30}">
                    </div>
                    <span class="auxiliary-text"> Internal link format : The module / The controller / methods ..., External link format :http://../../</span>
                </div>

js


// Automatically displays and hides forms by type
            var input_type=$('input[name=type]');
            function typeChangeHandle(){
                var ctypes=$('.ctype');
                var type=$(this).val();
                var hideCtypes=ctypes.filter(':not(.ctype'+type+')').slideUp(500,function () {
                    $('.ctype'+type).slideDown(500);
                });
            }
            typeChangeHandle.apply(input_type);
            input_type.on('change',typeChangeHandle);
            input_type=null;

That's all for this article, I hope you enjoy it.


Related articles: