[Résolu] Rendre plus simple ?

Bonjour !
Alors ce n'est pas tout à fait un problème que j'ai, juste une espèce de question pratique. Je débute en Jquery, donc voilà !


Alors voilà, mon idée était d'avoir des liens, et qu'une fois cliqué dessus, un bloc apparaît. Cela marche très bien ! J'ai juste eu un souci dans la généralisation du code, pour avoir quelque chose de plus court et de plus général. Je me demandais si c'était possible, car je me retrouve avec trois bout de code quasiment identique. (c'est le un petit clic ici http://creaphy.e-monsite.com/)

JQUERY

[code=javascript]$(".1").click(
			function(){
				$("#vote a div").animate({width:"0px",height:"0px"}, 0);
				$("#vote .1 div").animate({
					width:"120px",
					height:"60px",
					bottom:"26px",
					left:"-50px",
					}, 500);
				var nb = Math.floor(Math.random()*4)
				$("#vote .1 span img").attr({
				src: img_src[nb],});
			}
		);
		
		$(".2").click(
			function(){
				$("#vote a div").animate({width:"0px",height:"0px"}, 0);
				$("#vote .2 div").animate({
					width:"120px",
					height:"60px",
					bottom:"26px",
					left:"-50px",
					}, 500);
				var nb = Math.floor(Math.random()*3)
				$("#vote .2 span").css({
				"background": img_src[nb],});
			}
		);
		
		$(".3").click(
			function(){
				$("#vote a div").animate({width:"0px",height:"0px"}, 0);
				$("#vote .3 div").animate({
					width:"120px",
					height:"60px",
					bottom:"26px",
					left:"-50px",
					}, 500);
				var nb = Math.floor(Math.random()*3)
				$("#vote .3 span").css({
				"background": img_src[nb],});
			}
		);
		
	var img_src = ["http://25.media.tumblr.com/7ec8f02558afe49346ef9ea0f1cc7e35/tumblr_mnwjx6mWSn1qd9cpdo1_250.gif","http://25.media.tumblr.com/f00e8450e17c5e055adf90c93f0e44b1/tumblr_mnwjx6mWSn1qd9cpdo6_250.gif","http://25.media.tumblr.com/42f49abb169b817b26eb337d3ee245b4/tumblr_mnwjx6mWSn1qd9cpdo4_250.gif",
	"http://24.media.tumblr.com/tumblr_mb5uwxUCg41qhbs9xo2_250.gif"];
	
	});

[/code]

Merci d'avance !
Modifié par Pyphilia (21 Jun 2013 - 12:00)

Sans la structure HTML qui va avec c'est moins évident de te répondre avec certitude mais quelque chose dans ce genre là peut-être ?

$("#vote").on("click", "a", function(evt){
	evt.preventDefault();
	var $link = $(this);
		$div = $link.find('div'),
		$span = $link.find('span');
	$div.css({
		width:"0px",
		height:"0px"
	});
	$div.animate({
		width:"120px",
		height:"60px",
		bottom:"26px",
		left:"-50px"
	}, 500);
	var nb = Math.floor(Math.random()*3)
	$span.css({ "background": img_src[nb] });
	return false;
});

Ah oui, j'ai hésité à le mettre.

Du coup ton code avait quelques problèmes à se coller à mon HTML, mais c'est parfait ^^ Je vais étudier tout ça <3 Merci beaucoup !
Modifié par Pyphilia (21 Jun 2013 - 12:00)