0

我写了这段代码，但它不起作用：

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在 bucle 中显示不同的 s 但当我执行 a 时mouseover，大小没有变化。

4

5 回答 5

2

为什么它不起作用

您的代码不起作用的原因是：

i将具有立即执行的代码的正确值（例如showandhover调用）。但是，由于 JavaScript 的工作方式，这不适用于回调（例如你给的回调hover）。JavaScript 将记住变量，而不是提供回调时变量的值。直到循环完成后才会调用回调。这就是为什么在回调i中总是5，因为那是i最后一个值。

您可以在此处阅读更多相关信息：闭包 (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功能不仅适用于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 对象）。整齐吧？

于 2012-08-02T19:06:38.883 回答
1

没有必要循环遍历元素，如果你只是想出选择器，jQuery 就会为你做到这一点。

尝试匹配具有以开头的类的每个元素，web_header_mb_然后删除您不想要的元素。如果它们具有正确的索引，您可以:lt(5)或slice(0,5)，否则您必须根据类的最后一个字符过滤它们。您还可以链接方法，无需每次都调用选择器：

$("[class^='web_header_mb_']").filter(function() {
    var C = $(this).prop('class'); 
        C = C.charAt(C.length-1);
    return (C==1||C==2||C==3||C==4||C==5);
}).show(1000)
  .css("background","#FF0000")
  .on('mouseenter mouseleave', function() {
        $(this).css('width', e.type==='mouseenter'?'200':300);
});

或者

$("[class^='web_header_mb_']:lt(5)").show(1000)
    .css("background","#FF0000")
    .on('mouseenter mouseleave', function() {
       $(this).css('width', e.type==='mouseenter'?'200':300);
});
于 2012-08-02T18:42:30.320 回答
1

jQuery.hover() 实际上需要两个参数，鼠标移入和鼠标移出。

$(".web_header_mb_"+i).hover(
function ()  { $(this).css("width","200px") }, 
function ()  { $(this).css("width","300px") }
);

实际上，查看代码，这并不是一个真正的好方法。在这里尝试这种方式：给所有 div 相同的类，而不是使用 for 循环进行迭代，并使用 $.each 来提供所需的事件。

<div id="menu" class="web_header_mb"></div>
<div id="menu" class="web_header_mb"></div>
<div id="menu" class="web_header_mb"></div>
<div id="menu" class="web_header_mb"></div>
<div id="menu" class="web_header_mb"></div>

$.each(".web_header_mb", function (){
  $(this).hover(
   function ()  { $(this).css("width","200px") }, 
   function ()  { $(this).css("width","300px") }
  );
});
于 2012-08-02T18:24:11.000 回答
1

尝试使用这个

$(function(){

    var menu_h_number=5;

    for (var i=1; i <= menu_h_number;i++) {
        $(".web_header_mb_"+i).show(1000)
                              .css("background","#FF0000")
                              .mouseover(function () {
                                  $(this).css("width","200");
                              })
                              .mouseout(function () {
                                  $(this).css("width","300");
                              });
    }
});

也可以在jsfiddle上找到

于 2012-08-02T18:20:50.843 回答
1

这是因为执行悬停代码时 i 变量不在范围内或具有最新值。而是使用此变量。

仅供参考：1.您的 div 标签具有相同的 ID 但不同的类名。相反，使它们具有相同的类和不同的 ID。比你可以很好地使用 jQuery.each 函数。

  1. hover 函数可以有 2 个参数，第一个用于 mousein，第二个用于 mouseout。这样你就可以精简你的代码
于 2012-08-02T18:20:56.427 回答