jQuery的變化值鼠標懸停

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> 

開始時表現出不同的id S IN的bucle但當我做mouseover時，尺寸沒有變化。

Answer 1

爲什麼它不工作

您的代碼不工作的原因：您還可以鏈的方法，無需每次調用​​選擇是這樣的：

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對象）。整潔，嗯？

Answer 2

嘗試，因爲變量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

Answer 3

它。而是使用這個變量。

Fyi： 1.您的div標籤具有相同的ID但不同的類名。相反，讓他們相同的類和不同的ID。比你可以很好地利用jQuery.each函數。

1. hover函數可以有2個參數，第一個用於mousein，第二個用於mouseout。這樣你可以簡化你的代碼

Answer 4

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 5

沒有必要遍歷元素，如果你只是找出選擇器，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); 
});