JS如何對元件實現動態處理-js教程-PHP中文網

JS如何對元件實現動態處理

零到壹度

發布： 2018-04-04 14:50:53

原創

1601 人瀏覽過

這篇文章主要介紹了JS如何對元件實現動態處理,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

元件的動態添加，p的複製

對元件的動態處理是動態網頁的必備技能。這種情況基本上無法避免。就好例如客戶需要填寫表單，但具體要幾個表單呢你是未知的，很多人的處理方式就是靜態的陳列。例如直接寫好十個表單放在網頁上。這樣的使用者體驗真的很差，我們需要根據客戶的需求去動態的新增元件。當然有create方法去一個個創建，那當元件很多很複雜的時候呢？所以我們需要用一個p去把需要的元件框起來，直接一下子複製p中所有的元件。這裡舉個簡單的小例子。去複製被需求的幾個元件。

 
 <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>

登入後複製

運行結果如圖：

#這裡的select框也用到了onchange的方法，雖然例子簡單但體現了動態的思想。

缺點：當你的元件很複雜，例如伸縮框，Tab窗等，每個按鈕都有自己的索引，每個錶框都有自己的id，這個複製過去後，裡面的索引id等都沒有改變，會發生組件的衝突。而且複製出來的元件在原始碼裡是沒有的，想單獨去更改複製出來的元件的某個功能是比較麻煩的。

2.元件的隱藏，p的隱藏與更改

為了方便原始碼的更改，但又想實現頁面的“動態”，這裡可以用一個小方法。將所需的組件陳列好，隱藏起來，當客戶需要的時候再展現出來。

 
 <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>

登入後複製