Question

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

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>

当开始在bucle中显示不同的id时，但当我执行mouseover时，大小没有变化。

Answer 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

上找到

Answer 2

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

供参考： 1.你的div标签具有相同的ID但不同的类名。相反，使它们成为同一个类和不同的ID。比你可以非常好地利用jQuery.each函数。

悬停功能可以有2个参数，第一个用于mousein，第二个用于mouseout。这样你就可以简化你的代码了

Answer 3

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") }
  );
});

Answer 4

没有必要循环遍历元素，如果你只是想出选择器，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);
});

Answer 5

为什么不起作用

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

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);    // <--
            });
}

我在上面的代码中做的另一件事是 buffer 局部变量（currentItem）中的jQuery对象。这使您的代码更快，因为您只需要查询一次元素（而不是在这种情况下查找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对象）。干净，是吗？

Jquery更改值mouseover

5 个答案: