JavaScript/JQuery：在变量名中使用 $(this)答案

【问题标题】：JavaScript/JQuery: use $(this) in a variable-nameJavaScript/JQuery：在变量名中使用 $(this)
【发布时间】：2011-01-14 11:26:20
【问题描述】：

我正在编写一个 jquery 插件，它会在某些用户操作上更改某些元素的 css 值。在其他操作中，css 值应重置为其初始值。

由于我没有办法取回初始的 css 值，所以我只是创建了一个数组来存储所有初始值。

我这样做了：

var initialCSSValue = new Array()

在我的插件开始时，后来，在某种设置循环中，我使用了所有元素都可以访问的地方

initialCSSValue[$(this)] = parseInt($(this).css('<CSS-attribute>'));

这在 Firefox 中运行良好。但是，我刚刚发现，IE（甚至是 v8）在再次使用访问某个值时存在问题

initialCSSValue[$(this)]

代码中的其他地方。我认为这是因为我使用对象 ($(this)) 作为变量名。

有没有办法解决这个问题？

谢谢

【问题讨论】：

一件事：您正在实例化一个Array 对象，但是您并没有将它用作Array。您应该改为使用裸对象。在 JavaScript 中，数组由数字索引。如果您没有按数字索引，那么您就没有使用数组。 JavaScript 不是一种支持关联数组的语言。有关此主题的更多信息（迄今为止我发现的最佳资源）：blog.persistent.info/2004/08/javascript-associative-arrays.html
是的，你是对的 - 我还读到 js 中所谓的关联数组是对象，但不是真正的数组。

标签： javascript jquery internet-explorer this default-value

【解决方案1】：

用 jQuery 对象索引数组看起来很可疑。我会使用对象的 ID 来键入数组。

initialCSSValue[$(this).attr("id")] = parseInt...

【讨论】：

这只有在你假设所有东西都有一个id 时才有效，这是一个相当大的假设。
谢谢！在这种情况下，使用 ID 似乎不是那么有利，因为某些元素可能会在网页上出现两次。例如，如果我使用我的插件来设置搜索输入的样式，那么在页面的侧边栏中以及由相同搜索脚本生成的搜索页面的主要部分中可能会有一个搜索输入。在这种情况下，我需要两次使用相同的 ID - 不可能。
ID 应该始终是唯一的。您可以键入另一个属性，但 ID 应该是最简单的。

【解决方案2】：

使用$(this).data()

起初我建议使用 ID 和属性名称的组合，但每个对象可能都没有 ID。相反，请使用 jQuery Data 函数将信息直接附加到元素，以便轻松、独特地访问。

做这样的事情（<CSS-attribute> 被替换为 css 属性名）：

$(this).data('initial-<CSS-attribute>', parseInt( $(this).css('<CSS-attribute>') ) );

然后你可以像这样再次访问它：

$(this).data('initial-<CSS-attribute>');

使用data的替代方式：

在你的插件中，如果你想避免过多使用data，你可以像这样创建一个小辅助函数：

var saveCSS = function (el, css_attribute ) {
   var data = $(el).data('initial-css');
   if(!data) data = {};
   data[css_attribute] = $(el).css(css_attribute);
   $(el).data('initial-css', data);
}
var readCSS = function (el, css_attribute) {
   var data = $(el).data('initial-css');
   if(data && data[css_attribute])
     return data[css_attribute];
   else
     return "";
}

【讨论】：

似乎是个绝妙的主意！我还不知道 Data 函数（我对 jquery 和 javascript 还很陌生），但我现在就开始阅读它。谢谢
哇，就像一个魅力，比我的第一个（缓慢的）解决方案更好地达到了我的意图。
@Marcel 太棒了！请务必将此答案标记为已接受。祝你的项目好运，欢迎来到 Stack Overflow！

【解决方案3】：

哦，拜托，不要那样做... :)

编写一些 CSS 并使用 addClass 和 removeClass - 之后保持样式不变。

【讨论】：

我也想过这个，事实上我愿意这样做，如果这里没有人有更好的主意的话。但现在我对 Doug Neiners 的“.data-solution”非常满意，它完全符合预期。还是谢谢你！

【解决方案4】：

如果有人想查看该插件的实际运行情况，请在此处查看： http://www.sj-wien.at/leopoldstadt/zeug/marcel/slidlabel/jsproblem.html

【讨论】：