Unir dos funciones

[JUMASOL]

Hola.

Tengo dos funciones y me gustaría saber si hay alguna forma de unirlas en una para abaratar espacio y peso, ya que, como véis, tienes elementos comunes (en realidad hacen lo mismo).

Bien, de lo que se trata es de que no son dos claro, sino muchas más y me gustaría saber si se puede combinar para ahorrar espacio.

Código:

			    $('#SE').hover(
			        function () {
			            $('#map').vectorMap('set', 'colors', {
			                SE: '#323637'
			            })
			        },
			        function () {
			            $('#map').vectorMap('set', 'colors', {
			                SE: '#6383d3'
			            })
			        }
			    );   
			    $('#CH').hover(
			        function () {
			            $('#map').vectorMap('set', 'colors', {
			                CH: '#323637'
			            })
			        },
			        function () {
			            $('#map').vectorMap('set', 'colors', {
			                CH: '#6383d3'
			            })
			        }
			    );

[PHPeros]

Recuerda que la selección de Jquery funciona como en CSS, también puedes especificar más de un elemento:

Código Javascript:

$('#CE,#CH').hover(function(){//blabla
 

Saludos

[JUMASOL]

Gracias por contestar PhPeros.

Pero qué pasa con el resto de los elementos del script:

Código:

   $('#SE').hover(
			        function () {
			            $('#map').vectorMap('set', 'colors', {
			                SE: '#323637'
			            })
			        },
			        function () {
			            $('#map').vectorMap('set', 'colors', {
			                SE: '#6383d3'
			            })
			        }
			    );   
			    $('#CH').hover(
			        function () {
			            $('#map').vectorMap('set', 'colors', {
			                CH: '#323637'
			            })
			        },
			        function () {
			            $('#map').vectorMap('set', 'colors', {
			                CH: '#6383d3'
			            })
			        }
			    );

[JUMASOL]

He hecho lo siguiente:

Código:

			    $('#ZAN, #ZCA, #ZSA').hover(
			        function () {
			           
			            $('#map').vectorMap('set', 'colors', {
			                ZAN: '#323637', ZCA: '#323637', ZSA: '#323637'
			            })
			        },
			        function () {
			            $('#map').vectorMap('set', 'colors', {
			                ZAN: '#6383d3', ZCA: '#6383d3', ZSA: '#6383d3'
			            })
			        }
			    );

Me funciona, pero me parece repetitivo.

¿Es lo más que se puede resumir? ¿No se pueden reunir todos esos elementos con el mismo css?

[PHPeros]

Ya está bien... No te lo compliques más.

[JUMASOL]

Disculpa PHPeros, estaba editando el mensaje porque no es correcto. No funciona.

Se trata de elementos de lista conectados con secciones de imagen. Si lo unes todo así, cuando pasas por encima de cualquier elemento de lista cambian todas las imágenes igualmente.

Se me pasó colocar el inicio del script:

Código:

			    $('#map').vectorMap({
			        map: 'world_en'
			    });


			    $('#map').bind('regionOver.jvectormap', function (event, code) {
			        $('#' + code).addClass('over');

			    })
			    $('#map').bind('regionOut.jvectormap', function (event, code) {
			        $('#' + code).removeClass('over');
			    });

Es decir, las etiquetas #ZAN, #ZCA, #ZSA corresponden a ids de elementos de lista que coinciden a su vez con las de regiones del mapa SVG.

Si no hubiera un listado sí funciona, pero en el momento en que hay lista concordante, no.

Lo que hace este script es concordar nombres con regiones del mapa y viceversa. Tú pasas por encima de un nombre y cambia de color al tiempo que cambia de color la región que el corrresponde en el mapa y viceversa.

De eso se trata. Pero imagina la cantidad de regiones y nombres (más de 200).