11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Fonction dans une boucle For

Bonjour à tous
je suis pas très doué en javascript, j'ai plus l'habitude du PHP, mais j'aimerai simplifier un script

A la base, j'avais une fonction simple comme ça :

	function openCustomRoxy(){
	  $('#roxyCustomPanel').dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy(){
	  $('#roxyCustomPanel').dialog('close');
	}


mais j'ai dû la multiplier maladroitement car j'avais besoin de plusieurs fonctions identiques mais distinctes : 


	function openCustomRoxy1(){
	  $('#roxyCustomPanel1').dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy1(){
	  $('#roxyCustomPanel1').dialog('close');
	}
	function openCustomRoxy2(){
	  $('#roxyCustomPanel2').dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy2(){
	  $('#roxyCustomPanel2').dialog('close');
	}


sauf que si je dois le faire 9 fois, c'est un peu ridicule...
je cherche donc à écrire correctement la boucle For pour le faire , mais j'y arrive pas :


for (var j = 0; j <= 9; j++) {
	function openCustomRoxy.j{
	  $('#roxyCustomPanel' + j).dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy.j{
	  $('#roxyCustomPanel' + j).dialog('close');
	}
}


je pourrais peut etre définir les 2 fonctions openCustomRoxy et closeCustomRoxy une fois pour toute et ne changer que '#roxyCustomPanel' + j ... mais je ne sais pas trop bien comment...

si quelqu'un pouvait m'aider...

merci d'avance
la réponse doit etre quelque chose comme ça je suppose : 

function openCustomRoxy(i){
        $('#roxyCustomPanel'+i).dialog({modal:true, width:875,height:600});
}

function closeCustomRoxy(i){
        $('#roxyCustomPanel'+i).dialog('close');
}

for (var j = 0; j <= 9; j++) {
	openCustomRoxy(j);
	closeCustomRoxy(j);
}
Modérateur
Presque Smiley smile 


function openCustomRoxy(i){
  return function(){
     $('#roxyCustomPanel'+i).dialog({modal:true, width:875,height:600});
  };
}

function closeCustomRoxy(i){
  return function(){
        $('#roxyCustomPanel'+i).dialog('close');
  };
}

for (var j = 0; j <= 9; j++) {
  this['openCustomRoxy'+i] = openCustomRoxy(i);
  this['closeCustomRoxy'+i] = closeCustomRoxy(i);
}
// appels:
openCustomRoxy1();
openCustomRoxy2();
// …


j'ai utilisé this pour mettre la visibilité mais ce serait plus propre d'utiliser un array ou un objet.

à propos d'objet, plus élégant (et évolutif):


var CustomRoxy = function(i){
  this.i = i;
}
CustomRoxy.prototype.open = function(){
  $('#roxyCustomPanel'+this.i).dialog({modal:true, width:875,height:600});
}
CustomRoxy.prototype.close = function(){
  $('#roxyCustomPanel'+this.i).dialog('close');
}

var roxies = [];
for (var j = 0; j <= 9; j++) {
  roxies[j] = new CustomRoxy(j);
}

//appel:

roxies[1].open();
roxies[4].close();
Meilleure solution
merci beaucoup pour ta réponse...
je t'avoue que je ne comprends pas tout... la logique de code est bien différente que celle du PHP...
je vais essayer cela dans mon exemple, merci pour ton aide
snif... ca ne marche pas...

j'ai donc essayé ton code suivant plutot que l'autre car je le comprenais mieux : 

	function openCustomRoxy(i){
	  return function(){
		 $('#roxyCustomPanel'+i).dialog({modal:true, width:875,height:600});
	  };
	}

	function closeCustomRoxy(i){
	  return function(){
			$('#roxyCustomPanel'+i).dialog('close');
	  };
	}

	for (var j = 0; j <= 9; j++) {
	  this['openCustomRoxy'+i] = openCustomRoxy(i);
	  this['closeCustomRoxy'+i] = closeCustomRoxy(i);
	}


et mon code d'appel est celui là :


							// 9 photos...
							for ($i = 1; $i <= 9; $i++)
							{
								echo '
									<td align="left" valign="bottom">
										<a href="javascript:openCustomRoxy'.$i.'();"><img src="../userfiles/images/produits/defaut.jpg" id="customRoxyImage'.$i.'" height="100" /></a>
										<input type="hidden" name="img'.$i.'" id="customRoxyValue'.$i.'" value="">
									</td>
									<div id="roxyCustomPanel'.$i.'" style="display:none;">
									  <iframe src="../fileman/index.html?integration=custom&type=files&txtFieldId='.$i.'" style="width:100%;height:100%" frameborder="0">
									  </iframe>
									</div>				
								';

							}


dans cette version, rien ne s'ouvre quand je clique sur l'image
Je me suis dit que ca pouvait peut etre marcher si je changeais l'appel openCustomRoxy('.$i.') (au lieu de openCustomRoxy'.$i.'()) 


							// 9 photos...
							for ($i = 1; $i <= 9; $i++)
							{
								echo '
									<td align="left" valign="bottom">
										<a href="javascript:openCustomRoxy('.$i.');"><img src="../userfiles/images/produits/defaut.jpg" id="customRoxyImage'.$i.'" height="100" /></a>
										<input type="hidden" name="img'.$i.'" id="customRoxyValue'.$i.'" value="">
									</td>
									<div id="roxyCustomPanel'.$i.'" style="display:none;">
									  <iframe src="../fileman/index.html?integration=custom&type=files&txtFieldId='.$i.'" style="width:100%;height:100%" frameborder="0">
									  </iframe>
									</div>				
								';

							}


et là le clic ouvre une nouvelle fenetre blanche et vide avec seulement : 

$('#roxyCustomPanel'+i).dialog({modal:true, width:875,height:600});


donc il doit y avoir un truc qui m'échappe, mais pas grand chose...
Modérateur
Bonjour

en voyant ton code, clairement le plus simple et le plus propre:


function openCustomRoxy(i){
  $('#roxyCustomPanel'+i).dialog({modal:true, width:875,height:600});
}
function closeCustomRoxy(i){
  $('#roxyCustomPanel'+i).dialog('close');
}


php:


  print '<a href="javascript:openCustomRoxy('.$i.');"><img src="../userfiles/images/produits/defaut.jpg" id="customRoxyImage'.$i.'" height="100" /></a>';


devrait amplement suffire
bon ben ça ne marche pas...

avec 

<script>
	function openCustomRoxy(i){
	  return function(){
		 $('#roxyCustomPanel'+i).dialog({modal:true, width:875,height:600});
	  };
	}

	function closeCustomRoxy(i){
	  return function(){
			$('#roxyCustomPanel'+i).dialog('close');
	  };
	}
</script>


et 


// 9 photos...
							for ($i = 1; $i <= 9; $i++)
							{
								echo '
									<td align="left" valign="bottom">
										<a href="javascript:openCustomRoxy('.$i.');"><img src="../userfiles/images/produits/defaut.jpg" id="customRoxyImage'.$i.'" height="100" /></a>
										<input type="hidden" name="img'.$i.'" id="customRoxyValue'.$i.'" value="">
									</td>
									<div id="roxyCustomPanel'.$i.'" style="display:none;">
									  <iframe src="../fileman/index.html?integration=custom&type=files&txtFieldId='.$i.'" style="width:100%;height:100%" frameborder="0">
									  </iframe>
									</div>				
								';

							}


c'est pas bon
par contre, avec 

<script>
	function openCustomRoxy1(){
	  $('#roxyCustomPanel1').dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy1(){
	  $('#roxyCustomPanel1').dialog('close');
	}
	function openCustomRoxy2(){
	  $('#roxyCustomPanel2').dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy2(){
	  $('#roxyCustomPanel2').dialog('close');
	}
	function openCustomRoxy3(){
	  $('#roxyCustomPanel3').dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy3(){
	  $('#roxyCustomPanel3').dialog('close');
	}
	function openCustomRoxy4(){
	  $('#roxyCustomPanel4').dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy4(){
	  $('#roxyCustomPanel4').dialog('close');
	}
	function openCustomRoxy5(){
	  $('#roxyCustomPanel5').dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy5(){
	  $('#roxyCustomPanel5').dialog('close');
	}
	function openCustomRoxy6(){
	  $('#roxyCustomPanel6').dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy6(){
	  $('#roxyCustomPanel6').dialog('close');
	}
	function openCustomRoxy7(){
	  $('#roxyCustomPanel7').dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy7(){
	  $('#roxyCustomPanel7').dialog('close');
	}
	function openCustomRoxy8(){
	  $('#roxyCustomPanel8').dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy8(){
	  $('#roxyCustomPanel8').dialog('close');
	}
	function openCustomRoxy9(){
	  $('#roxyCustomPanel9').dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy9(){
	  $('#roxyCustomPanel9').dialog('close');
	}
</script>


et ça, cela fonctionne : 


							// 9 photos...
							for ($i = 1; $i <= 9; $i++)
							{
								echo '
									<td align="left" valign="bottom">
										<a href="javascript:openCustomRoxy'.$i.'();"><img src="../userfiles/images/produits/defaut.jpg" id="customRoxyImage'.$i.'" height="100" /></a>
										<input type="hidden" name="img'.$i.'" id="customRoxyValue'.$i.'" value="">
									</td>
									<div id="roxyCustomPanel'.$i.'" style="display:none;">
									  <iframe src="../fileman/index.html?integration=custom&type=files&txtFieldId='.$i.'" style="width:100%;height:100%" frameborder="0">
									  </iframe>
									</div>				
								';

							}
Faut croire que la variable dans les parenthèses, cela ne lui plait pas ?

PS : pour info, j'ai oublié de dire que pour ta solution, j'ai dit "ça marche pas", mais ce qui se passe, c'est que lorsque l'on clique sur l'une des 9 images, cela ouvre une nouvelle fenetre dont l'url est toujours : 
$('#roxyCustomPanel'+i).dialog({modal:true, width:875,height:600});
Modérateur
jp.bond a écrit :
bon ben ça ne marche pas...

avec …

Effectivement ton code ne fonctionne pas mais celui que je t'ai mis juste en-dessus devrait fonctionner. Tu as essayé de complexifier ma solution (pourquoi?) et tu renvoie une fonction dans l'url, effectivement ce n'est pas bon,
Modifié par kustolovic (15 Sep 2017 - 22:56)
Sujet clos
Aller à