0

我是 jQuery 新手，学得很快，但我真的需要帮助。

我有一个包含像这个例子这样的数据的页面：

该页面有一个名为“内容”（id）的潜水

此 div 包含 2 个子 div：一个用于数据，一个用于表单，分别称为div-data和div-form。

在此处输入图像描述

最初，“div-data”被显示，另一个被隐藏。

当我单击编辑时，“div-data”消失，“div-form”出现填充形式的数据。

我进行了数据验证，一切都很好，编辑后的数据在 DB 上更新，所以我必须隐藏“div-form”并显示“div-form”，但问题是，“div-data”中的数据没有更新。

我该怎么做才能更新那个div？？？

我在最后一步：/

4

3 回答 3

2

那是事实 ！因为您在#div-form / input而不是#div-data中更新数据，所以在隐藏#div-form并显示#div-data之后，您会看到存储在#div-data中的旧数据。

解决办法太多了，我给大家挑一个简单的（伪代码，未经测试）：

向这两个地方添加一些通用类。

var $div_data_cache = $('#div-data');

$('#div-form input').each(function() {
    var className = $(this).attr('className');

    $div_data_cache.find(className).html( $(this).val() )            
});

这样，在按下“ok”后，这个脚本将帮助你在彼此之间同步数据。

注意：如果你不太关心跨浏览器的问题，可以使用 HTML5 中引入的新属性contenteditable

现在，您可以为#div-data中的所有子div 设置此属性，并设置一些事件以在完成编辑后触发validations/db 操作！

于 2012-07-11T07:54:06.700 回答
1

您已经在一个单独的元素中获得了值，您可以替换其内容。

然后您可以从 ajax 成功函数中填充这些元素：

success: function(data){
    $('#div-data').find('.firstname').text(data.firstname).end()
        .find('.lastname').text(data.lastname).end()
        .find('.work').text(data.work);
}
于 2012-07-11T07:47:42.323 回答
1

为什么不切换表单输入字段上的禁用选项？这样，您的 DOM 中只需要一个 div 并且您不必关心 DOM 操作。

这就是我所说的：

假设您的 EDIT 按钮的 id 是“form-edit”：

$('#form-edit').click(function(){
    $('#div-form').find('input ').each(function(){
        $this = $(this);
        if ($this.attr('disabled')) $this.removeAttr('disabled');
                else $this.attr('disabled', 'disabled');
    });
});

http://www.w3schools.com/tags/att_option_disabled.asp

于 2012-07-11T07:58:07.507 回答