Simplificar evento sintaxis

[DmD]

Buenas gente.
Recién estoy arrancando con javascript y necesito saber si hay alguna manera de simplificar esto:

Código HTML:

$("#play1").click(function() 
		{
			$('#reproductor1').css('display', 'inline');
			$('#reproductor2').css('display', 'none');
			$('#reproductor3').css('display', 'none');
			$('#reproductor4').css('display', 'none');
			$('#reproductor5').css('display', 'none');
			$('#reproductor6').css('display', 'none');
			$('#reproductor7').css('display', 'none');
			$('#reproductor8').css('display', 'none');
			$('#reproductor9').css('display', 'none');
			$('#reproductor10').css('display', 'none');
			$('#reproductor11').css('display', 'none');
			$('#reproductor12').css('display', 'none');
		})

Lo que hago es cuando apreta el boton play1 de <a id="play1">Play</a> muestro el reproductor 1, y así con 12 reproductores. Se me hace un choclazo de código y me parece que debe haber alguna manera mas simple, no??.

Gracias!.
Daniela.

[alexg88]

Buenas,

Esta es una posible solución:

Código Javascript:

function showOrHide(indice) {
    return function(){    
    for(j = 1;j<=3;j++){
        if (indice!= j){
            $("#reproductor"+j).hide();
        }
        else $("#reproductor"+j).show();
    }
}
}
 
        $(document).ready(function(){
for(i = 1;i<=3;i++){     
  $("#play"+i).click(showOrHide(i));
}
});
 

Otra solución sería ocultar únicamente el elemento que este visible y mostrar el que te interesa. Para ello, deberías guardar una referencia al elemento que está visible o ponerle una clase común a todos los reproductores y buscar el reproductor visible a través de un selector de clase con JQuery.

Saludos.

[dontexplain]

Lo siento por ser tan pesado, pero es que se me ocurre una forma más rápida usando el pseudoselector not en una sola línea

$("div[id^=reproductor]:not([id=reproductor1])").css("display","none");

y por tanto

$("div[id^=reproductor]:not([id=reproductor"+var+"])").css("display","none");

donde var será el número que ocultas...

y el .css("display","none") también se puede simplificar en hide()

$("div[id^=reproductor]:not([id=reproductor"+var+"])").hide();

Ahora bien, creo que ya no puedo simplificarlo más.

[DmD]

Muchas gracias a los 2!!!, pude adaptar las soluciones que me dieron y simplificarlo!.