用jquery的replaceWith方法做页面加载内容切换

来源：互联网发布：图像算法工程起薪编辑：程序博客网时间：2024/05/21 11:26

首先页面的内容是：

   <input  value="{$vo.type}" data-url="{:url('BaseConfig/editPost', ['id' => $vo['id']])}"  data-type="type"  type="text" id="toggle_type">

想转换成的内容是：

<div class="toggle-input" data-url="{:url('BaseConfig/editPost', ['id' => $vo['id']])}"  data-type="type"><span>{$vo.type}</span><input value="{$vo.type}" class="settings-item form-control" style="display: none;" type="text"></div>

用jquery的replaceWith方法实现转换

$(document).ready(function () {        var length = $("[id^='toggle']").length;        for (var i = 0; i < length; i++) {            var val = $("[id^='toggle']:eq('" + i + "')").val();            if (val == null || val == undefined || val == "") {                 val = '&nbsp;';            }            var dataType = $("[id^='toggle']:eq('" + i + "')").attr('data-type');            var dataUrl = $("[id^='toggle']:eq('" + i + "')").attr('data-url');            $("[id^='toggle']:eq('" + i + "')").replaceWith("  <div class='toggle-input' data-url='" + dataUrl + "' data-type='" + dataType + "'>" + "<span>" + val + "</span>"                + "<input id='toggle' type='text' class='settings-item form-control form-control-sm' style='display: none' value='" + val + "'>"                + "</div>");        }    });

页面的内容要改的内容同上

<input style="display: none;" value="{$vo.type}" data-url="{:url('BaseConfig/editPost', ['id' => $vo['id']])}"  data-type="type"  type="text" class="settings-item form-control form-control-sm toggle-input">

//进一步改进的

    $(document).ready(function () {        $('.toggle-input').each(function () {            var val = $(this).val();            if (val == '' || val == undefined || val == null) {                val = '&nbsp;';            }            var wrap = $("<div class='toggle-input'><span>" + val + "</span></div>");            $(this).before(wrap).appendTo(wrap);        });        $('input.toggle-input').each(function () {            $(this).removeClass('toggle-input');        });    });

阅读全文

0 0