Передача независимого параметра функции .mouseover

Question

У меня есть 32 элемента html с именами идентификаторов nyg, nyj и некоторые другие. Моя цель - связать событие mouseover и mouseout с каждым из элементов, поэтому я могу изменить color окна, в котором пользователь витает. Это не работает, и я уверен, что есть лучший способ сделать это, а также эффективный код. Я делаю это для 32 различных команд, поэтому эффективность важна. Если бы кто-то мог вести меня в правильном направлении, я был бы очень признателен. Благодаря!

HTML

<div id="content"> 
    <ul class="conference"> 
     <ul class="division"> 
     <li id="nyg" class="team"></li> 
     <li id="nyj" class="team"></li> 
     <li class="team"></li> 
     .... 

JS

var teams = [ 
{ 
    id: 'nyg', 
    name: 'Giants', 
    city: 'New York', 
    color1: '#000099', 
    color2: '#0000ff', 
    depth: 'http://www.ourlads.com/nfldepthcharts/depthchart/NYG', 
    offseason: 'http://espn.go.com/nfl/team/transactions/_/name/nyg', 
    logo: 'logos/nyg.jpeg' 
}, 
{ 
    id: 'nyj', 
    name: 'Jets', 
    city: 'New York', 
    color1: '#006600', 
    color2: '#009900', 
    depth: 'http://www.ourlads.com/nfldepthcharts/depthchart/NYG', 
    offseason: 'http://espn.go.com/nfl/team/transactions/_/name/nyg', 
    logo: 'logos/nyg.jpeg' 
}]; 

for (team in teams) { 
    $('#'+teams[team].id;).mouseover(mouseIn(teams[team].color1)).mouseout(mouseOut(teams[team].color2)); 
} 

function mouseIn(color) { 
    $(this).css("background-color", color); 
} 

function mouseOut(color) { 
    $(this).css("background-color", color); 
} 

Answer 1

Во-первых, ваш HTML является недействительным. У вас не может быть ul в детстве от ul - вам нужно разместить li между ними.

Чтобы решить вашу проблему, вы можете изменить данные своих команд как объект, связанный с id элементов li, а не массив объектов. Таким образом, вы можете напрямую обращаться к требуемому объекту при наведении элемента. Попробуйте это:

var teams = { 
 
    nyg: { 
 
    name: 'Giants', 
 
    city: 'New York', 
 
    color1: '#000099', 
 
    color2: '#0000ff', 
 
    depth: 'http://www.ourlads.com/nfldepthcharts/depthchart/NYG', 
 
    offseason: 'http://espn.go.com/nfl/team/transactions/_/name/nyg', 
 
    logo: 'logos/nyg.jpeg' 
 
    }, 
 
    nyj: { 
 
    name: 'Jets', 
 
    city: 'New York', 
 
    color1: '#006600', 
 
    color2: '#009900', 
 
    depth: 'http://www.ourlads.com/nfldepthcharts/depthchart/NYG', 
 
    offseason: 'http://espn.go.com/nfl/team/transactions/_/name/nyg', 
 
    logo: 'logos/nyg.jpeg' 
 
    } 
 
}; 
 

 
$('.team').hover(function() { 
 
    $(this).css('background-color', teams[this.id].color1); 
 
}, function() { 
 
    $(this).css('background-color', teams[this.id].color2); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
    <ul class="conference"> 
 
    <li> 
 
     <ul class="division"> 
 
     <li id="nyg" class="team">NYG</li> 
 
     <li id="nyj" class="team">NYJ</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>