Question

抱歉想不出一个更好的头衔。：）

到此为止，

我一直把头发拉了几个小时试图解决这个问题。

我有以下功能：

function changeCss(elem, styles) {

   var oldstyles = styles;

   elem.css( styles )

   for(var key in styles){
       var oldstyle = input.css(key);
     oldstyles[key] = oldstyle;              //this line is the issue
       elem.data( 'oldstyle', oldstyles )                      
   }
}

以下是如何调用它的示例：

var theStyle = { border: '1px solid red'};
//elem is a jQuery object of an HTML element

changeCss(elem, thestyle);

问题是在注释行（第8行）之后，styles的值是oldstyles的值。

因此，例如，如果没有设置边框的特定元素的CSS属性，即未定义，styles的值将为{ border: "" }

怎么可能呢？这就是为什么我要宣讲oldstyles;我正在对styles变量进行“备份”。

我已使用var oldstyles = {};更改了第3行，但似乎工作正常。

但这不是它应该如何，我需要有旧样式，因为后来我想重置样式 - 但只有我改变的样式。

当oldstyles等于styles时，我无法理解为什么它会“中断”？

我希望我能提供足够的代码让你理解，而且我的表现也很好。：）

如果有任何不清楚的地方，请询问。

感谢您提供任何见解和帮助。

Answer 1

这是因为oldstyles实际上只是对样式的引用而不是副本。由于您似乎正在使用jQuery，因此可以使用jQuery.extend使旧样式成为样式的副本：

var oldstyles = {};
jQuery.extend(oldstyles, styles);

Answer 2

Javascript对象由引用传递。这意味着，在var oldstyles = styles;行中。您正在创建一个引用与styles相同值的新变量。

要创建副本，您需要执行以下操作：

var oldstyles = {};
for (var style in oldstyles) {
  if (oldstyles.hasOwnProperty(style)) {
    oldstyles[style] = styles[style];
  }
}

在jQuery中，您可以使用$.extend()：

var oldstyles = $.extend({}, styles);

需要帮助：奇怪的JavaScript行为......当另一个变量设置时，一个变量会被更改

2 个答案: