有没有某种方法可以在jover的hover（）中的两个函数之间共享变量而不使用全局变量？
[英]Is there some way to share variables between the two functions in hover() in jquery without using global variables?
问题描述
My code looks like this: 
我的代码如下所示：
quickbarcolor = $("#quick-bar a").css("color");
$("#quick-bar a").hover(function () {
if ($(this).css("color") != quickbarcolor) quickbarcolorhover = $(this).css("color");
V$(this).animate({ color: quickbarcolorhover },400);
}, function() {
$(this).animate({ 'color': quickbarcolor},400)}
);
It works fine but it depends on global variables to share the colors between the two functions in hover(). 它工作正常，但取决于全局变量才能在hover（）中的两个函数之间共享颜色。 I don't know everything about global vars but I thought it was better to avoid them unless necessary, though I know that sharing values between functions is what they are for. 我并不了解有关全局变量的所有信息，但我认为最好避免使用它们，除非有必要，尽管我知道在函数之间共享值是它们的目的。 Still I'd like to see if anyone knows a better way of doing this. 我仍然想看看是否有人知道更好的方法。
4 个解决方案
解决方案1
5 已采纳 2012-12-01 14:44:21
One option is to store your values on the DOM element being animated using the data-* attribute. 一种选择是将值存储在使用data-*属性进行动画处理的DOM元素上。 Here's what I mean by that: 这就是我的意思：
$.data($("#quick-bar a"), "col", $("#quick-bar a").css("color"));
$("#quick-bar a").hover(function() {
var self = $(this);
var col = $.data(self, "col");
if ($(this).css("color") != col) {
$.data(self, "col", self.css("color"));
}
self.animate({
color: col
}, 400);
$.data(self, "col", self.css("color");
}, function() {
$(this).animate({
'color': $.data($(this), "col");
}, 400)
});
解决方案2
4 2012-12-01 14:50:27
This approach creates no globals. 这种方法不会创建全局变量。
$(function() {
var quickBar = $("#quick-bar a"),
quickbarcolor = quickBar.css("color");
quickBar.hover(function () {
var $this = $(this),
color = $this.css("color");
if ( color != quickbarcolor) {
$this.animate({ color: color },400);
}
}, function() {
$(this).animate({ 'color': quickbarcolor},400)}
);)
});
解决方案3
1 2012-12-01 14:48:58
或使用JQuery数据API。
$(this).data("myCustomData", "Hi");
解决方案4
0 2012-12-01 15:00:27
Data attributes are not a good thing since they are editable through any kind of html debugger like firebug. 数据属性不是一件好事，因为它们可以通过任何类型的HTML调试器（如firebug）进行编辑。 This could means anyone with it could change the behavior of your code (it's ok for a rollover, but think further...) 这可能意味着任何拥有它的人都可以改变代码的行为（可以进行过渡，但是请再想想……）
You could wait for the dom ready event to fire to add your code also, but you could not and then have a faster execution. 您可以等待dom ready事件触发以添加代码，但是您不能这样做 ，然后可以更快地执行。 So, for me , best way is to put your rollover declaration into an anonymouse function which will be in a script tag at the end of the html body tag. 因此， 对我而言 ，最好的方法是将过渡声明放入匿名函数中，该函数将位于html body标签末尾的script标签中。 And if you're afraid of execution before jQuery has loaded, you could simply use defer attribute (compat' on caniuse.com ) 而且，如果您担心在jQuery加载之前执行，则可以简单地使用defer属性（ caniuse.com上的compat ）。
<html>
<head>
...
<script src="jquery.min.js" type="text/javascript" defer="defer"></script>
...
</head>
<body>
...
<script type="text/javascript" defer="defer">
(function()
{
var strictly_private_var = 1;
/* do your rollover */
})();
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.