V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
meteor2013
V2EX  ›  JavaScript

请问有没有办法刷新一个DIV,而不是刷新整个页面。

  •  
  •   meteor2013 · 2013-06-01 04:31:12 +08:00 · 26501 次点击
    这是一个创建于 4187 天前的主题,其中的信息可能已经有所发展或是发生改变。
    有个div1, 包含了多个div,用户可以对里面的这些div进行操作,比如移动,改变颜色。
    目前希望有个刷新按钮回到最初的状态。(只刷新div1,而不是刷新整个页面。)

    用Jquery 试了一下,$("#div1").hide().fadeIn('fast');
    但没有成功刷新,请问大家有什么办法没有?

    谢谢
    14 条回复    1970-01-01 08:00:00 +08:00
    msg7086
        1
    msg7086  
       2013-06-01 04:33:02 +08:00
    hide+fadein哪里刷新了……

    要reset一个div,需要把div的原始状态保存下来。document.ready的时候把div.html()存下来,reset的时候写回去。
    meteor2013
        2
    meteor2013  
    OP
       2013-06-01 04:41:13 +08:00
    @msg7086 你的意思是:
    var divClone = $("#div1").clone();

    然后
    $("#div1_div").replaceWith(divClone);

    这样的话。因为div1包含的div太多了,资源会不会。。。。。?
    bitsmix
        3
    bitsmix  
       2013-06-01 04:53:16 +08:00
    html()
    msg7086
        4
    msg7086  
       2013-06-01 04:56:54 +08:00
    html()
    raincious
        5
    raincious  
       2013-06-01 06:57:44 +08:00
    我能瞎指挥么?

    我的想法类似这样:

    改之前先

    div.shadow = doc.getElementByXX(XXX); // Backup

    回写:

    if (div.shadow) {

    for(var p in div.shadow) {

    oldElement[p] = div.shadow[p];

    }

    }
    hongyz
        6
    hongyz  
       2013-06-01 07:43:00 +08:00 via iPhone
    html()
    要么从服务器请求div1片段
    crazybubble
        7
    crazybubble  
       2013-06-01 07:49:47 +08:00
    可以试试把div1里的div的那些初始状态记录下来,比如存在一个object里,然后点击刷新回到最初状态的时候,就把这些div的属性设置回初始状态。
    breeswish
        8
    breeswish  
       2013-06-01 08:38:26 +08:00 via Android
    要么用clone() 要么只保存HTML(如果没有listener的话)

    其实这样的内存占用也不会多多少吧 :) 因为你的clone是在最初状态下clone的
    meteor2013
        9
    meteor2013  
    OP
       2013-06-01 09:13:00 +08:00
    @breeswish
    1. 有listener
    2. div1 里面的div大概有700多个。
    likexian
        10
    likexian  
       2013-06-01 09:16:42 +08:00
    backbone,你需要它
    breeswish
        11
    breeswish  
       2013-06-01 09:21:04 +08:00 via Android
    @meteor2013 那就……要么clone要么从服务器拉取HTNL重新绑定
    dimfox
        12
    dimfox  
       2013-06-01 11:17:39 +08:00
    Jessepinkman
        13
    Jessepinkman  
       2013-06-01 12:37:42 +08:00
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script type="text/javascript">
    function showTime(){
    var tDate = new Date();
    var tseconds = tDate.getSeconds();
    if (tseconds < 10)
    tseconds = '0' + tseconds;
    var timeStr = '当前时间是' + tDate.getHours() + ':' + tDate.getMinutes() + ':' + tseconds;
    document.getElementById('time').innerHTML = timeStr;
    setTimeout(showTime, 1000);
    }

    </script>
    </head>
    <body onload="showTime()">
    <div id="content">
    <div id="time">刷新</div>
    </div>
    </body>
    </html>
    ipconfiger
        14
    ipconfiger  
       2013-06-01 12:43:06 +08:00
    一开始的时候
    var origin_str = $("#div1").html();
    这样存的只是html的字符串,不是dom对象。能有多大开销呢,即使是一个1M的字符串。相对你的内存来也是小case
    恢复的时候
    $("#div1").html(origin_str);
    就搞定了,重建dom结构和重新渲染这个区域差不多,从服务端获取也不过如此
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   982 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 22:55 · PVG 06:55 · LAX 14:55 · JFK 17:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.