zoukankan      html  css  js  c++  java
  • 排序、添加、删除、上移、下移功能

      $(document).ready(function () {
                var radioGroup = $(".radioGroup input");
                var types = $(".add-test tr.types");
                //全部答案隐藏,默认显示第一个
                $(".add-test tr.types:gt(0)").attr({ style: 'display:none' });
                //切换题型
                radioGroup.click(function (event) {
                    types.eq($(this).index()).removeAttr("style").siblings('.types').attr({ style: 'display:none' });
                });
    
                var answer = {
                    init: function () {
                        answer.add();
                        answer.del();
                        answer.moveUp();
                        answer.moveDown();
                    },
                    //对列表项进行排序
                    //list:重置的数据
                    reset: function (list) {
                        if (!list || list.length == 0) return;
                         
                        $.each(list, function (k, v) {
                            var isNumber = parseInt($(v).find('._index').text()) > 0;
                            var text = isNumber ? text = (k + 1) + "." : String.fromCharCode(k + 65);
                            
                            $(v).find('._index').text(text);
                        });
                    },
                    //新增
                    add: function () {
                        $('._addBtn').click(function () {
                            var _type = $(this).attr('data-type');
                            _type = !!_type ? _type : "radio";
    
                            var html = '';
                            if (_type == "text") {
                                html = '<div class="answer">' +
                                           '<span class="radio-btn _index">1.</span>' +
                                           '<textarea></textarea>' +
                                           '<div class="answer-function">' +
                                               '<span class="delthis"></span>' +
                                           '</div>' +
                                       '</div>';
                            }
                            else {
                                html = '<div class="answer">' +
                                  '<div class="radio-btn"><input type="' + _type + '" name="add-option" /><span class="_index">A</span></div>' +
                                  '<textarea></textarea>' +
                                  '<div class="answer-function">' +
                                  '<span class="delthis"></span>' +
                                  '<span class="up"></span>' +
                                  '<span class="down"></span>' +
                                  '</div>' +
                                  '</div>';
                            }
    
                            $(this).before(html);
                            answer.reset($(this).siblings('.answer'));
                        });
                    },
                    //删除
                    del: function () {
                        $('body').on("click", ".delthis", function () {
                            //确认框
                            if (confirm("您是否确认要删除该选项?")) {
                                var td = $(this).closest('td');
                                $(this).closest('.answer').remove();
                                answer.reset(td.find('.answer'));
                            }
                        });
                    },
                    //上移
                    moveUp: function () {
                        $('body').on("click", ".up", function () {
                            $(this).closest('.answer').prev('.answer').before($(this).closest('.answer'));
                            answer.reset($(this).closest('td').find('.answer'));
                        });
                    },
                    //下移
                    moveDown: function () {
                        $('body').on("click", ".down", function () {
                            $(this).closest('.answer').next('.answer').after($(this).closest('.answer'));
                            answer.reset($(this).closest('td').find('.answer'));
                        });
                    },
                };
    
                answer.init();
            });
  • 相关阅读:
    基于STM32F103C8T6的超声波测距示例
    ST-LINK 到 SWD接线图
    MDK破解版下载
    CompletableFuture Quasar 等并发编程
    c++中参数传递和函数返回简析
    c++中冒号(:)和双冒号(::)的用法
    c++中,size_typt, size_t, ptrdiff_t 简介
    c++中,保证头文件只被编译一次,避免多重包含的方法
    时间序列分析之一次指数平滑法
    Openv2.1基本数据类型
  • 原文地址:https://www.cnblogs.com/muwei/p/4727144.html
Copyright © 2011-2022 走看看