Comment implémenter le traitement dynamique des composants dans JS-js tutoriel-php.cn

Comment implémenter le traitement dynamique des composants dans JS

零到壹度

Libérer： 2018-04-04 14:50:53

original

1632 Les gens l'ont consulté

Cet article présente principalement comment JS implémente le traitement dynamique des composants. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un oeil.

Ajout dynamique de composants, copie de p

Le traitement dynamique des composants est dynamique Compétences essentielles pour les pages Web. Cette situation est fondamentalement inévitable. Par exemple, les clients doivent remplir un formulaire, mais vous ne savez pas combien de formulaires sont nécessaires. De nombreuses personnes le traitent via un affichage statique. Par exemple, rédigez dix formulaires directement et placez-les sur la page Web. Ce type d'expérience utilisateur est vraiment médiocre. Nous devons ajouter dynamiquement des composants en fonction des besoins du client. Bien sûr, il existe une méthode de création pour créer un par un, mais qu'en est-il lorsqu'il existe des composants nombreux et complexes ? Nous devons donc utiliser un p pour encadrer les composants requis et copier directement tous les composants dans p à la fois. Voici un exemple simple. Pour copier plusieurs composants requis.

 
 <html>
    <body> 
    <h1>选择需要复制的次数</h1>
	 <p id="d1"> 
    <select id="s1" onchange="myfunction()" />
         <option value=1>1</option>
         <option value=2>2</option>
		 <option value=3>3</option>
		 
     </select>
	 </p>
	 <p id="father">
	    <label>我是等待被复制的p</label>
		<button type="button">按钮</button>
		<label>文本框</label><input type="text">
	 </p>
	<p>下面是被复制的</p>
	<p id="son"></p>
	<p id="son2"></p>
	<p id="son3"></p>	 
	 <script>
	    function myfunction(){		
		 var select = document.getElementById("s1");       
        //获得当前选中的值
        var value = select.value;
		 if(value==2){
		    var fatherp = document.getElementById("father");
            var sonp = document.getElementById("son");
			var sonp2 = document.getElementById("son2");
			
            //将fatherp中的所有内容 包括HTML标签 给son
            sonp.innerHTML = fatherp.innerHTML;
			sonp2.innerHTML = fatherp.innerHTML;
		 }
		 else if(value==3){
		 var fatherp = document.getElementById("father");
            var sonp = document.getElementById("son");
			var sonp2 = document.getElementById("son2");
			var sonp3= document.getElementById("son3");
			
            //将fatherp中的所有内容 包括HTML标签 给son
            sonp.innerHTML = fatherp.innerHTML;			
			sonp2.innerHTML = fatherp.innerHTML;
			sonp3.innerHTML = fatherp.innerHTML;
		 }
		
      
		}
	</script>
	 </body>
	 

 </html>

Copier après la connexion

Le résultat d'exécution est tel qu'indiqué dans la figure :

La zone de sélection ici utilise également la méthode onchange. Bien que l'exemple soit simple, il reflète une pensée dynamique.

Inconvénients : lorsque vos composants sont complexes, tels que des boîtes télescopiques, des fenêtres à onglets, etc., chaque bouton a son propre index, et chaque cadre de table a son propre identifiant. Après avoir copié celui-ci, l'index à l'intérieur si le. id, etc. ne sont pas modifiés, des conflits de composants se produiront. De plus, les composants copiés ne sont pas dans le code source. Il est difficile de modifier individuellement une certaine fonction des composants copiés.

2. Cacher des composants, masquer et modifier p

Afin de faciliter le changement de code source, mais aussi de parvenir à la "dynamique" de la page, une petite méthode peut être utilisée ici. Affichez les composants requis, masquez-les et affichez-les lorsque les clients en ont besoin.

 
 <html>
    <body> 
    <h1>选择需要复制的次数</h1>
	 <p id="d1"> 
    <select id="s1" onchange="Hidden()" />
         <option value=1>1</option>
         <option value=2>2</option>
		 <option value=3>3</option>
		 
     </select>
	 </p>
	 <p id="father">
	    <label>我是等待被复制的p</label>
		<button type="button">按钮</button>
		<label>文本框</label><input type="text">
	 </p>
	<p>下面是被复制的</p>
	<p id="son1" style="display:none">
	    <label>我是等待被复制的p 但我可以和父类不一样</label>
		<button type="button">按钮</button>
		<label>文本框</label><input type="text">
	 </p>
	 <p id="son2" style="display:none">
	    <label>我是等待被复制的p 但我可以和父类不一样也和上面的不一样</label>
		<button type="button">按钮</button>
		<label>文本框</label><input type="text">
	 </p>
	
	 <script>
function Hidden() {
  var select = document.getElementById("s1");
  var p1 = document.getElementById("son1");
  var p2 = document.getElementById("son2");
  //1.获得当前选中的值
  var value = select.value;
  if (value == 2) {
    p1.style.display = &#39;&#39;;
  } else if (value == 3) {
    p1.style.display = &#39;&#39;;
    p2.style.display = &#39;&#39;;
  }
}
</script>
</body>
</html>

Copier après la connexion

Vous pouvez voir que le contenu du texte peut être modifié Contrairement à la méthode ci-dessus, il ne s'agit plus d'une simple copie. Il semble également dynamique lorsqu’il est utilisé par les utilisateurs. Mais en fait, il s’agit toujours d’une page Web statique. L’avantage est qu’il est facile à modifier et qu’il existe de nombreux types de modifications pouvant être apportées. Les lacunes sont également évidentes. Comment peut-on avoir 100, voire 1 000 formulaires ? Devez-vous écrire autant de choses à l’avance et ensuite les cacher ?

Les deux méthodes ci-dessus sont très pratiques et peuvent répondre rapidement à certains besoins des clients. Des changements appropriés ou une combinaison des deux méthodes apporteront de meilleurs résultats.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!