jQuery的变化值鼠标悬停

的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 S IN的bucle但当我做mouseover时，尺寸没有变化。

来源

2012-08-02 Fran

而不是一个for循环，我认为这将是一个更清洁的一个或两个CSS类，减少JavaScript的单行左右。 – 2012-08-02 18:22:16

我删除了您添加的新代码，因为您提出了**新问题**。请把它作为一个新问题发布。您仍然可以[在修订版中找到代码]（http://stackoverflow.com/posts/11783427/revisions）。 – PPvG 2012-08-02 19:09:38

啊好吧我想我可以把更多的东西，并继续后，好的，我会创建新的职位 – Fran 2012-08-02 19:13:18

为什么它不工作

您的代码不工作的原因：您还可以链的方法，无需每次调用选择是这样的：

i将具有正确的代码立即执行的值（例如show和d呼叫）。但是，由于JavaScript的工作方式，这不适用于回调（例如您给hover的那个）。 JavaScript将记住提供回调时变量的变量，而不是值。在循环完成后，将不会调用回调。这就是为什么在回调i将永远是，因为这是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() and hover() all wor k on jQuery 集合（以及单个jQuery对象）。整洁，嗯？

来源

2012-08-02 19:06:38 PPvG

是真正的$（this）完美的作品，直到这个我创建函数的名称和调用函数，并为该作品，直到现在我用这个，如果没有使用$（this）没有作品，并在所有的时间当我把alert（）我总是看到我= 5的值，现在完美的作品:) – Fran 2012-08-02 19:11:44

尝试，因为变量i不是在范围或执行悬停代码时有最新的值使用此

$(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-02 18:20:50

它。而是使用这个变量。

Fyi： 1.您的div标签具有相同的ID但不同的类名。相反，让他们相同的类和不同的ID。比你可以很好地利用jQuery.each函数。

hover函数可以有2个参数，第一个用于mousein，第二个用于mouseout。这样你可以简化你的代码

来源

2012-08-02 18:20:56 iMatoria

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-02 18:24:11 Arm0geddon

我modlo翻转菜单mouover代码和检测par或impar元素，你可以看到，现在的问题是我怎么可以创建效果超过背景 – Fran 2012-08-02 19:02:52

没有必要遍历元素，如果你只是找出选择器，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-02 18:42:30 adeneo

jQuery的变化值鼠标悬停

回答

相关问题