通過函數的參數傳遞一個數組

Question

我試圖簡化像這樣使用多個變量，如「one_a」，「one_b」等：

$(".one_a").mouseover(function(){ 
    $('.main_box').addClass("one_a"); 
    }); 
    $(".one_a").mouseout(function(){ 
    $('.main_box').removeClass("one_a"); 
}); 

這是我到目前爲止，我無法從「runShapes」函數返回一個變量，並通過「swapBackground」函數傳遞它。任何幫助將不勝感激！

var myShapes=new Array(); 
    myShapes[0]="one_a";  
    myShapes[1]="one_b"; 
    myShapes[2]="one_c"; 

function runShapes(){ 
    for (var i=0;i<myShapes.length;i++){ 
    } 
    return myShapes[i]; 
} 

function swapBackground(currentShape){ 
    $(currentShape).mouseover(function(){ 
     $('.main_box').addClass(currentShape); 
    }); 
    $(currentShape).mouseout(function(){ 
     $('.main_box').removeClass(currentShape); 
    }); 
} 

window.onload = swapBackground("." + runShapes); 

Answer 1

我無法從「runShapes」函數返回一個變量，並通過「swapBackground」函數傳遞它。

您不應該將其退回。你應該只調用swapBackground功能從runShapes這樣的：

function runShapes(){ 
    for (var i=0;i<myShapes.length;i++){ 
     swapBackground(myShapes[i]); // don't add the dot here, you won't need 
             // it for add/removeClass 
    } 
} 

然後調用runShapes當document is ready - 不要使用window.onload：

$(document).ready(runShapes); 

順便說一句，你最好可以使用.hover()來安裝處理程序：

function swapBackground(currentShape) { 
    $("." + currentShape).hover(function(){ 
     $('.main_box').addClass(currentShape); 
    }, function(){ 
     $('.main_box').removeClass(currentShape); 
    }); 
} 

Answer 2

您可以使用$.each這樣的：

$.each(["one_a", "one_b", "one_c"], function(_,shape) { 
    $('.'+shape).mouseover(function(){ 
     $('.main_box').addClass(shape); 
    }).mouseout(function(){ 
     $('.main_box').removeClass(shape); 
    }); 
}); 

請注意，我改變了你的代碼，以便mouseout事件只能被綁定一次。您可能也對hover函數感興趣。