[Résolu] Comment déclarer une variable avec une condition ?

J'ai une erreur de syntaxe dans mon code, je n'arrive pas a déclarer une variable avec une condition liée au hashtag :

var contenu = function() {
	if(location.hash == '#terminaux'){
		'terminal'
	} else if(location.hash == '#contacts'){
		'contact'
	} else if(location.hash == '#constructeurs'){
		'constructeur'
	} else {
		'utilisateur'
	}
};

je débute en JS et je tatone niveau syntaxe.
Modifié par Klesk (14 Sep 2012 - 17:35)

Avec une fonction il faudrait que tu retourne la valeur à associer. Mais de la façon dont tu a écris ton cote, la variable contenu sera une référence à la fonction et non à la valeur retournée.
Il faudrait plutôt l'écrire comme cela :

function getContenu() {
        if(location.hash == '#terminaux'){
		return 'terminal'
	} else if(location.hash == '#contacts'){
		return 'contact'
	} else if(location.hash == '#constructeurs'){
		return 'constructeur'
	} else {
		return 'utilisateur'
	}
}

var contenu = getContenu();

Côté syntaxe tu peux aussi remplacer les if/elseif/else par une boucle switch.
Modifié par moust (14 Sep 2012 - 12:17)

Merci moust. J'avais testé en faisant une fonction mais il me manquait le return dont je en connaissait pas l'existance.

Peux-tu m'en dire plus sur le switch ?

Voici un exemple :

switch (location.hash){
    case "#terminaux":
        return "terminal";
        break;
    case "#contacts":
        return "contact";
        break;
    case "#constructeurs":
        return "constructeur";
        break;
    default :
        return "utilisateur";
}

Et comment j'appelle la valeur du switch ensuite ? Je l'insère dans une fonction en lieu et place des else if c'est ça ?

EDIT : J'ai testé avec les deux solutions en gardant celle du switch mais dans les deux cas ma fonction déconne.

function getContenu() {
	switch (window.location.hash){
		case "#terminaux":
			return "terminal";
			break;
		case "#contacts":
			return "contact";
			break;
		case "#constructeurs":
			return "constructeur";
			break;
		default :
			return "utilisateur";
	};
};

var contenu = getContenu();

En gros si je me positionne sur mon onglet terminaux, mon hashtag change. Je fais une modif de contenu et mon message de confirmation met bien le bon mot dans un pop fancybox. Si je change d'onglet, mon hashtag change. je reproduit le test mais cette fois-ci il me sort le mot précédent.

Il semble que la fonction ne marche que la première fois :S.
Modifié par Klesk (14 Sep 2012 - 15:52)

Bug résolu. J'ai inclu la fonction et la variable dans ma fonction générale de façon à ce que ma variable soit actualisée. Elle était en fait chargée une seule fois.

function getContenu() {
	switch (window.location.hash){
		case "#terminaux":
			return "terminal";
			break;
		case "#contacts":
			return "contact";
			break;
		case "#constructeurs":
			return "constructeur";
			break;
		default :
			return "utilisateur";
	};
};

$('.bouton_ajax').fancybox({
	href: $(this).attr('href'),
	type: 'ajax',
	wrapCSS: 'fancybox-custom',
	closeClick:false,
	openEffect:'elastic',
	openSpeed:200,
	closeEffect:'elastic',
	closeSpeed:200,
	helpers:{
		overlay:{
			css:{'background-color':'#eee'}
		}
	},
	beforeShow: function() {
		$('#formulaire').on('submit', function() {
			$.ajax({
				url: $(this).attr('action'),
				type: $(this).attr('method'),
				data: $(this).serialize(),
				dataType: 'json',
				success: function(json) {
					if(json.reponse == 'ajout ok') {
						refresh_ajax();
						var contenu = getContenu();
						$.fancybox({
							wrapCSS:'fancybox-custom',
							closeClick:false,
							closeBtn:false,
							openEffect:'elastic',
							openSpeed:200,
							closeEffect:'elastic',
							closeSpeed:200,
							content:'<div style="height:50px;">Votre '+ contenu +' est ajout&eacute;</div>',
							helpers:{overlay:{css:{'background-color':'#eee'}}}
						});
						/*setTimeout("$.fancybox.close()",2000);*/
					} else if(json.reponse == 'modification ok'){
						refresh_ajax();
						var contenu = getContenu();
						$.fancybox({
							wrapCSS:'fancybox-custom',
							closeClick:false,
							closeBtn:false,
							openEffect:'elastic',
							openSpeed:200,
							closeEffect:'elastic',
							closeSpeed:200,
							content:'<div style="height:50px;">Votre '+ contenu +' est modifi&eacute;</div>',
							helpers:{overlay:{css:{'background-color':'#eee'}}}
						});
						/*setTimeout("$.fancybox.close()",2000);*/
					} else if(json.reponse == 'suppression ok'){
						refresh_ajax();
						var contenu = getContenu();
						$.fancybox({
							wrapCSS:'fancybox-custom',
							closeClick:false,
							closeBtn:false,
							openEffect:'elastic',
							openSpeed:200,
							closeEffect:'elastic',
							closeSpeed:200,
							content:'<div style="height:50px;">Votre '+ contenu +' est supprim&eacute;</div>',
							helpers:{overlay:{css:{'background-color':'#eee'}}}
						});
						/*setTimeout("$.fancybox.close()",2000);*/
					} else {
						alert('Erreur : '+ json.reponse);
					}
					
				}
			});
			return false;
		});
   }
});

Modifié par Klesk (14 Sep 2012 - 16:51)

Pour éviter le code dupliqué, je te conseille aussi d'utiliser une fonction qui appellera ton plug-in fancyBox en lui passant un paramètre pour assigner le content de ton choix