2

这可能是非常基本的，但我正在拖延......

在页面加载时，我需要将元素的 html 内容保存到变量中。我在页面中有其他代码将更改元素的 html 内容。所以我需要能够将值恢复为默认值（页面加载时的值）。问题是我的变量值正在更改为最新值。

如何使分配给变量“stick”的初始值？

currentElementsHTML = $("#myDOMElement"),
currentElementsHTMLDefaultValue = currentElementsHTML.html()
... do stuff that changes currentElementsHTML 
... revert to currentElementsHTMLDefaultValue whenever i need to
4

4 回答 4

3

有很多方法可以存储一些数据并在以后使用，其中一些需要了解 JavaScript 作用域的工作方式 - 其他的只是依赖 jQuery 方法。

首先想到的事情

全局变量

这样做的坏方法是将值存储为全局变量：

function at_the_start(){
   /// notice there is no var keyword, this means the variable will be global
   global_html = $('element').html();
}

function later_on(){
   $('element').html( global_html );
}

你不应该这样做，因为你的数据会“污染全局命名空间”——这基本上意味着其他代码可以很容易地访问你的变量（并弄乱它），并且你可能会无意中覆盖一些其他代码的全局数据——特别是如果您使用相当通用的变量名称。

局部变量保持在范围内

一个更好的方法是使用 JavaScript 的力量来实现自己的目的，即它的作用域能力，这里有一些好点要阅读—— JavaScript 中变量的作用域是什么？：

function my_code(){

  var html = $('element').html();

  /* Do stuff here */

  $('element').html( html );

}

以上依赖于一个局部变量以及您必须将所有内容保存在同一个函数调用中的事实。由于您很可能会依赖用户触发事件的混合，因此您不能真正使用上述内容。这是因为您将在不同的位置使用许多函数，并且它们不能都共享相同的局部变量。或者他们可以吗？

以下是我所说的“全局局部”变量——很可能不是它的真实名称，但它描述了我所看到的事物：

function my_code(){

  /// this variable is local, due to the var keyword
  /// but it will be accessible in both the functions below
  var html_local = '';

  var my_function_to_start = function(){
    html_local = $('element').html();
  }

  var after_other_things_have_happened = function(){
    $('element').html( html_local );
  }

  /// you can even apply these functions to say an event handler
  /// and the variable will be remembered because it exists within
  /// the "after_other_things_have_happened" function's scope.
  $('another.element').click(after_other_things_have_happened);

}

上面的工作是因为 JavaScript 函数总是可以访问在以前的父块/父范围或父函数中定义的变量。

jQuery 数据

考虑到您正在使用 jQuery，jQuery 提供了一种非常简单的方法来存储任意数据，您无需了解有关范围或本地和全局变量的任何信息。我花了一段时间来写这篇文章，所以很明显，此时其他海报已经正确地指出以下是一个好主意 - jQuery Data：

$('element').data( 'old_html', $('element').html() );

然后可以随时使用以下命令访问它：

$('element').data( 'old_html' );

所以...

$('element').html( $('element').data( 'old_html' ) );

将值放回去 - 它与元素一起存储，因此无论您可以访问何处，都可以获取$('element')分配给它的数据。


其他一些不太相关的方式（但仍然是数据存储的方法）

作为对象的属性存储

有时，另一个有用的功能是 JavaScript 几乎将所有数据类型都视为对象。这意味着您可以为几乎任何东西添加属性。如果有点奇怪，以下实际上是很有可能的。

var a = new String('This is a string');
    a.withAProperty = 'another string';

alert(a);
alert(a.withAProperty);

我偶尔会使用它在函数上创建伪静态属性，如下所示：

var my_function = function(){
  if ( ! my_function.staticProp ) {
    my_function.staticProp = 'abc';
  }
  /* use my_function.staticProp for something here */
}

var another_function(){
  /* you can also access my_function.staticProp here
     but only after my_function has been called once */
}

/* and my_function.staticProp here, but only 
   after my_function has been called once  */

这几乎与使用全局 var 具有相同的效果（特别是如果您将其应用于全局函数），但意味着您的值存储在您的函数命名空间之上，从而大大减少了与其他代码冲突的可能性。它仍然意味着外部代码可以影响您的 var 的内容——这实际上可能是一个好处，具体取决于您想要做什么。

将内容存储在 dom 中

根据您希望存储的内容，有时将这些数据记录在 DOM 中可能会有所帮助。其中最明显的是将数据写入隐藏输入或隐藏元素。后者的好处是，如果它碰巧采用标记信息的形式（就像你的那样） ，你仍然可以导航这些数据（使用 jQuery 或 document.getElementById之类的） 。这也是避免循环引用引起的内存泄漏的有益方法——如果你正在处理大量数据——只要你确保清空数据传输中涉及的变量。

$.ajax('request_html.php').done(function(data){
  $('<div id="hidden_html" />').hide().html(data).appendTo('body');
  data = null;
  /// you only need mullify data if you were to have other
  /// sub/child functions within this callback, mainly being wary
  /// of closures - which are functions that are defined in a certain
  /// scope chain, but are then returned or put to use outside of
  /// that chain - i.e. like event listeners. 
  /// nullify vars and removing large properties is still good practice though.
});

然后当你想检索时：

$('#hidden_html').html();

同时在这两点之间，您显然仍然可以遍历数据：

$('#hidden_html h1 > a[name=first]');
于 2012-10-23T23:44:59.557 回答
1

您将原始 HTML 与相同的 DOM 元素相关联，这样它就不会消失：

$("#myDOMElement").data("initial-html", $("#myDomElement").html());
于 2012-10-23T23:19:42.717 回答
1

类似的东西，但尚未测试：

$(function() {

  $('#id').data('store', $('#id').html());

});

...

$('#id').html(data('store'));
于 2012-10-23T23:21:16.187 回答
0

设置它并忘记它。

如果您将 的内容推.html()送到变量中，除非您对该变量执行某些操作以将其删除，否则它将保留在那里：

var original = $("#foo").html(); // original HTML is now in 'origina'

这不会改变，除非你改变它。

使用 $.data() 在元素上存储数据

不过，将它作为数据（使用 jQuery 的.data方法）存储在元素本身上可能对您更有利：

var element = $("#foo");
element.data( "original", element.html() );

这样您就可以在以后随时访问它：

console.log( element.data( "original" ) );

录制、重置和恢复演示：http: //jsfiddle.net/ft8M9/

也适用于许多项目

// Access all elements to restore
var restore = $(".restore");

// Save original HTML, and set new HTML
restore.each(function(i,o){
    var that = $(this);
    that.data("original", that.html())
        .html("Changed " + i);
});

// After 2 seconds, restore original HTML, remove stored data
setTimeout(function(){
    restore.each(function(i,o){
        var that = $(this);
        that.html( that.data("original") )
            .removeData( "original" );
    });
}, 2000);

演示：http: //jsfiddle.net/ft8M9/1/

于 2012-10-23T23:21:02.593 回答