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事件仅绑定一次。您可能也对hover函数感兴趣。

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
    }
}

然后，在document is ready - 不使用runShapes时调用window.onload：

$(document).ready(runShapes);

不过，您最好使用.hover()来安装处理程序：

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

通过函数的参数传递数组

2 个答案: