我写了这段代码,但是没有用:
JavaScript:
$(function() {
var menu_h_number=5
for (i=1; i<=menu_h_number; i++)
{
$(".web_header_mb_"+i).show(1000);
$(".web_header_mb_"+i).css("background", "#FF0000");
$(".web_header_mb_"+i).hover(function ()
{
$(".web_header_mb_"+i).css("width", "200");
});
$(".web_header_mb_"+i).mouseout(function ()
{
$(".web_header_mb_"+i).css("width", "300");
});
}
});
HTML:
<div id="menu" class="web_header_mb_1"></div>
<div id="menu" class="web_header_mb_2"></div>
<div id="menu" class="web_header_mb_3"></div>
<div id="menu" class="web_header_mb_4"></div>
<div id="menu" class="web_header_mb_5"></div>
开始时,气泡中显示不同的
id
,但是当我执行mouseover
时,大小没有变化。 最佳答案
为什么它不起作用
您的代码无法正常工作的原因是:
对于立即执行的代码(例如i
和show
调用),hover
具有正确的值。但是,由于JavaScript的工作方式,这不适用于回调(例如您提供给hover
的回调)。在提供回调时,JavaScript会记住该变量,而不是该变量的值。循环完成后才会调用回调。这就是为什么在回调i
中始终为5的原因,因为这是i
的最后一个值。
您可以在此处阅读有关此内容的更多信息:Closures (MDN)
另外,请注意id
必须是唯一的。您不能将id
“菜单”赋予五个不同的元素;这就是课程的目的。换句话说:您的代码中有id
和class
后退。
如何运作
规避闭包“问题”的最简单方法是在回调函数中使用$(this)
。在jQuery中,回调函数内的this
关键字始终指向触发事件的对象。通过使用$(this)
,您将拥有正确的jQuery对象,而不必大惊小怪:
for (i=1; i<=menu_h_number; i++)
{
var currentItem = $(".web_header_mb_" + i);
currentItem
.show(1000)
.css("background", "#FF0000");
.hover(
function() { // mouseenter
$(this).css("width", 200); // <--
},
function() { // mouseleave
$(this).css("width", 300); // <--
});
}
我在上面的代码中所做的另一件事是将jQuery对象缓冲在局部变量(
currentItem
)中。这使您的代码更快,因为您只需要查找一次元素(在这种情况下,不是6次)。您应该尽可能这样做。同样,如您所见,
hover
function不仅仅用于mouseover
事件。您可以为其提供回调,以同时处理mouseover
和mouseout
。正如其他人已经建议的那样,您可以做的另一件事是使用单个类而不是5个不同的类。如果查询与多个对象匹配,则jQuery函数(
$()
)实际上将返回一个集合。因此,给出以下HTML:
<div class="menu web_header_mb"></div>
<div class="menu web_header_mb"></div>
<div class="menu web_header_mb"></div>
<div class="menu web_header_mb"></div>
<div class="menu web_header_mb"></div>
您可以使用each(),如下所示:
$(".menu.web_header_mb").each(function() {
$(this)
.show(1000)
.css("background", "#FF0000");
.hover(
function() { // mouseenter
$(this).css("width", 200);
},
function() { // mouseleave
$(this).css("width", 300);
});
});
甚至这个:
$(".menu.web_header_mb").
.show(1000)
.css("background", "#FF0000");
.hover(
function() { // mouseenter
$(this).css("width", 200);
},
function() { // mouseleave
$(this).css("width", 300);
});
最后一个有效的原因是show(),css()和hover()都适用于jQuery集合(以及单个jQuery对象)。整洁吧?