Передача массива с помощью параметров функции во

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); 

Btw, вы лучше могли бы использовать .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.