错误嵌入的 jQuery 变量答案

【问题标题】：Incorrectly embedded jQuery variable错误嵌入的 jQuery 变量
【发布时间】：2011-01-13 21:24:01
【问题描述】：

这里的回调函数不起作用。我认为我错误地使用了 startColor 变量。

注意：这需要 jQuery UI。

$("a").hover(function() { 
    var startColor = $(this).css("color");
    $(this).stop().animate({ color: "#54a888"}, 350);
    },function() {  
    $(this).stop().animate({ color: " + startColor + "}, 350);
});

谢谢各位。我实际上是在尝试重构这段代码：

$("nav ul li a, aside ul li a").hover(function() {  
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
    },function() {  
    $(this).stop().animate({ color: "#5944b2"}, 350);  //Start color
});
$("h5#logo a, button").hover(function() {  
    $(this).stop().animate({ backgroundColor: "#54a888"}, 350);
    },function() {  
    $(this).stop().animate({ backgroundColor: "#000000"}, 350);
});
    $("h3 a").hover(function() {  
    $(this).stop().animate({ color: "#54a888"}, 350);
    },function() {  
    $(this).stop().animate({ color: "#000000"}, 350);
});

我有不同的起始颜色和不同的属性要制作动画。似乎有比重复相同代码 3 次更好的解决方案。

【问题讨论】：

请原谅我的错误格式
我不是 jQuery 专家，但您没有在刚刚发布的内容中使用 startColor 变量 - 您只有确切的字符串 " + startColor +"

标签： jquery variables colortransform

【解决方案1】：

在两个函数之外声明，去掉" + + "

var startColor;

$("a").hover(function() { 
    startColor = $(this).css("color");
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
},function() {  
    $(this).stop().animate({ color: startColor}, 350);  //Start color  
});

...或者更好的是，使用.data() 来记住该特定元素的颜色：

$("a").hover(function() { 
    if( !$(this).data( 'startColor' ) ) {
        $(this).data( 'startColor', $(this).css("color") );
    }
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
},function() {  
    $(this).stop().animate({ color: $(this).data('startColor')}, 350);  
});

...或者如果所有链接的颜色恰好相同，则只需获取一次，然后重复使用该值。它实际上可能更安全，因为您正在处理动画。

var startColor = $(a).css("color");

$("a").hover(function() { 
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
},function() {  
    $(this).stop().animate({ color: startColor}, 350);  //Start color  
});

编辑：根据您更新的问题，您似乎正在尝试减少一些代码。似乎它们之间存在足够的差异，以至于尝试合并会很复杂，以至于您最终可能会得到更多代码。

减少的一种方法是将您的 hover() 处理程序更改为接受 1 个函数而不是 2 个：

$("h3 a").hover(function( e ) {  
    $(this).stop().animate({ color: e.type == 'mouseenter' ? "#54a888" : "#000000"}, 350);
});

缩短一点。

另一种选择（因为我假设您使用的是 jQueryUI）是为 toggleClass 设置动画（尽管我认为它可能在最新版本的 UI 中被破坏）。

$("h3 a,nav ul li a, aside ul li a,nav ul li a, aside ul li a").hover(function( e ) {  
    $(this).stop().toggleClass('hover', 350);
});

然后在 CSS 中：

h3 a.hover {
    color:#000000;
}

nav ul li a.hover, aside ul li a.hover {
    color:#54a888;
}

// etc...

...请再次注意，我认为它可能在最新版本中被破坏，您需要进行测试，因为它有时可能会很脆弱。

【讨论】：

感谢帕特里克，非常有帮助的回复。对我刚刚添加到问题中的内容有什么想法吗？
@DaveKingsnorth：这些不同之处足以使它们分开是有意义的。如果您正在减少代码，您可以将 1 个函数传递给.hover()，并测试事件类型以提供您想要的颜色。我会更新一个例子。

【解决方案2】：

" + + " 没有意义。只需使用

$(this).stop().animate({ color: startColor}, 350);  //Start color  });

【讨论】：

【解决方案3】：

您正在一个回调中创建一个局部变量，并尝试在另一个回调中使用它。

相反，您应该使用 $.data 存储旧颜色。
另外，不要在变量周围加上引号；这使它成为一个字符串。

【讨论】：