如何在JavaScript中连接变量和字符串？

本文介绍了如何在JavaScript中连接变量和字符串？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

请不要立即将此标记为副本。我看过类似的问题，但仍然无法解决这个问题。

Please don't immediately mark this as a duplicate. I've looked at similar questions but still can't figure this out.

这就是我目前的情况：

$(document).ready(function(){ for(var i=1;i<2;i++) { $("#MenuBarButton"+i).mouseover(function(){ $("#ldheMenuBarLayer"+i).stop().animate({height:'66px'},{queue:false, duration:600, easing: 'easeOutBounce'}) }); $("#MenuBarButton"+i).mouseout(function(){ $("#ldheMenuBarLayer"+i).stop().animate({height:'41px'},{queue:false, duration:600, easing: 'easeOutBounce'}) }); } });

这不起作用。没有任何反应，控制台中没有任何内容。但是，如果我在每个 $ 它起作用的功能。

That doesn't work. Nothing happens and nothing appears in the console. But if I directly replace the i with a 1 in each of the $ function things it works.

我不是编程新手，但我是JavaScript的新手，所以我做了一些明显错误的事情吗？谢谢！

I'm not new to programming but I'm new to JavaScript, so am I doing something obviously wrong? Thanks!

编辑：当我说我用<$替换 i 时c $ c> 1 ，这是因为ID是 MenuBarButton1 和 ldheMenuBarLayer1 。

When I say I replace the i with a 1, that's because the IDs are MenuBarButton1 and ldheMenuBarLayer1.

推荐答案

你遇到的基本问题是 i只有一个值。该变量只存在一次。事件处理程序内的代码指向变量，而不是创建事件处理程序时的值。所以请使用如下所示的代码：

The basic problem you have is that there is only ever one value for i. That variable only exists once. The code inside the event handler points to the variable, not to its value when the event handler was created. So take your code that looks like this:

$("#ldheMenuBarLayer"+i).stop()...

每次运行事件处理程序时， i 将是 2 ，因为我们已经完成整个循环。

Every time the event handler is run, i will be 2, because we've already gone all the way through the loop.

你需要使用值 i ，而不是对变量的引用。你通过引入一个带有匿名，立即调用函数的新作用域来实现这一点：

You need to use the value of i, not a reference to the variable. You do this by introducing a new scope with an anonymous, immediately-invoked function:

for(var i=1;i<=2;i++) { (function(j) { $("#MenuBarButton"+j).mouseover(function(){ $("#ldheMenuBarLayer"+j).stop().animate({height:'66px'},{queue:false, duration:600, easing: 'easeOutBounce'}) }); $("#MenuBarButton"+j).mouseout(function(){ $("#ldheMenuBarLayer"+j).stop().animate({height:'41px'},{queue:false, duration:600, easing: 'easeOutBounce'}) }); }(i)) }

暂且不谈所有这些，值得一提的是，这不是一种非常简洁的方式。 jQuery方式可能如下所示：

Leaving aside all of this, it's worth mentioning that this isn't a very jQuery-ish way of going about things. The jQuery way might look like this:

var menuBarButtons = $('.menuBarButton').mouseover(function() { var idx = menuBarButtons.index(this); $('.ldheMenuBarLayer') .eq(idx) .stop() .animate( { height: '66px' }, { queue: false, duration: 600, easing: 'easeOutBounce' } ); });

此代码不起作用（可能）。它需要基于您的标记和页面结构。最终可能无法实现。

This code won't work (probably). It needs to be based on your markup and page structure. It might ultimately not be possible.