javascript - 通过函数的参数传递数组

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

你可以$.each这样使用：

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

请注意，我更改了您的代码，以便该mouseout事件仅绑定一次。您可能还对悬停功能感兴趣。

Answer 2

我无法从“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在文档准备好时调用- 不要使用window.onload：

$(document).ready(runShapes);

顺便说一句，您最好使用它.hover()来安装您的处理程序：

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