Js/JQuery根据模板生成页面元素

原创已于 2022-03-18 10:57:13 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #jquery

于 2022-03-18 09:10:38 首次发布

jquery 专栏收录该内容

3 篇文章

订阅专栏

该段代码展示了如何使用format函数结合参数创建任务卡片。首先，检查format函数的参数，如果只有一个参数则返回一个内联函数，否则处理并转换参数为数组。然后，通过遍历任务列表，为每个任务生成包含任务编号、处理人、处理人电话、执行动作和处理时间的任务卡片元素，并将其添加到页面的#task-list容器中。最后，为最后一个任务的标题添加特殊样式。

编写fotmat函数

function format(source, params) {
    if (arguments.length === 1)
        return function () {
            var args = $.makeArray(arguments);
            args.unshift(source);
            return $.format.apply(this, args);
        };
    if (arguments.length > 2 && params.constructor !== Array) {
        params = $.makeArray(arguments).slice(1);
    }
    if (params.constructor !== Array) {
        params = [params];
    }
    $.each(params, function (i, n) {
        source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
    });
    return source;
};

调用目标并生成元素

  function createTaskBox(taskList) {
            console.log(taskList)
            $.each(taskList, function (index, item) {
                console.log(index)
                let title = (index+1) + '.' + item.taskKey
                let handler = item.receivername
                let handlerPhone = item.receiverPhone
                let action = item.taskKey
                let dealTime = item.updateTime
                let template = `  <div class="task-box">
                <div class="task-title">{0}</div>
                <div class="flex-content taskInfo">
                    <div class="label">处理人:</div>
                    <div class="content">
                        <span class="handler">{1}</span>
                        <div class="right-float">
                            处理人手机号码:
                            <span>{2}</span>
                        </div>
                    </div>
                </div>
                <div class="flex-content taskInfo">
                    <div class="label">执行动作:</div>
                    <div class="content">
                        <span class="action">{3}</span>
                        <div class="right-float">
                            处理时间:
                            <span class="handleTime">{4}</span>
                        </div>
                    </div>
                </div>
            </div>`
                let taskResult = format(template, title, handler, handlerPhone, action, dealTime)//将数据填入模板
                $('#task-list').append(taskResult + '')
            })
            const last = $('.task-box').last();
            last.children('.task-title').addClass('act')
        }