i have 32 html elements id names nyg, nyj, , others. goal bind mouseover , mouseout event each of elements, can change color of box user hovering over. not work, , sure there better way while being code efficient. doing 32 different teams, efficiency important. if lead me in right direction, appreciate it. thanks!
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' }]; (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); }
firstly html invalid. cannot have ul child of ul - need place li between them.
to solve problem amend teams data object, keyed id of li elements, instead of array of objects. way can directly access required object on hover of element. try this:
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>
Comments
Post a Comment