jQuery操作編輯頁面，span與input標(biāo)簽之間的隨時轉(zhuǎn)換

 1           <li>
 2               <label for="companyType">企業(yè)性質(zhì)</label>
 3                 <span class="companyType spanToSelect" id="companyType"></span>
 4           </li>
 5           <li>
 6               <label for="companySize">企業(yè)規(guī)模</label>
 7               <span class="companySize spanToSelect" id="companySize"></span>
 8           </li>
 9           <li>
10               <label for="companyMsg" class="companyMsgLabel">企業(yè)簡介</label>
11                 <span class="companyMsg spanToTextarea" id="companyMsg"></span>
12           </li>
13           <br>
14           <br>
15           <li>
16               聯(lián)系方式
17               <hr>
18           </li>
19           <li>
20               <label for="companyAddress">企業(yè)地址</label>
21               <input type="text" name="addressSelect" id="citySelect" class="city_input" value="湖北省-武漢市-洪山區(qū)" readonly="readonly">
22           </li>
23           <li>
24                  <span id="companyAddress" class="companyAddress spanToInput"></span>
25           </li>
26           <li>
27               <label for="companyTel">企業(yè)電話</label>
28               <input type="tel" id="tel1" class="tel1" placeholder="">
29               <select name="tel2" id="tel2" class="smallBtn2">
30                   <option value="021">021</option>
31               </select>
32               <span class="companyTel spanToInput" id="companyTel"></span>
33           </li>
34           <li>
35               <label >企業(yè)郵箱</label>
36               <span class="companyMail spanToInput" id="companyMail"></span>
37           </li>
38           <li>
39               <label for="companyIp">企業(yè)網(wǎng)址</label>
40               <span class="companyIp spanToInput" id="companyIp"></span>
41           </li>

 1 var switchToSpan=function () {
 2             // console.log($(this).attr("id"));
 3             var cId=$(this).attr("id");//獲取當(dāng)前點(diǎn)擊input的id
 4            //console.log($("#"+cId).prop('nodeName').toLowerCase());
 5             var thisTag=$("#"+cId).prop('nodeName').toLowerCase();
 6         var a,b=null;
 7         if(thisTag=="input"){
 8             a=$(this).val();
 9              b=switchToInput;
10         }
11         else if(thisTag=="select"){
12              a=$(this).find("option:selected").text();//獲取selected的option文本值
13              b=switchToSelect;
14         }
15         else if(thisTag=="textarea"){
16             a=$(this).val();
17             b=switchToTextarea;
18         }
19         var $span=$("<span>",{
20                     text: a
21                 });
22             $span.addClass(cId);
23             $span.attr("id",cId);
24             $(this).replaceWith($span);
25             $span.on("click",b);
26 };

 1 var switchToInput=function () {
 2             //console.log($(this).attr("id"));
 3             var cId=$(this).attr("id");//獲取當(dāng)前點(diǎn)擊span的id
 4             var $input=$("<input>",{
 5                 val:$(this).text(),    
 6                 type:"text"
 7             });
 8             $input.addClass(cId);
 9             $input.attr("id",cId);
10             $(this).replaceWith($input);
11             $input.on("blur",switchToSpan);//失去焦點(diǎn)時，執(zhí)行switchToSpan函數(shù)
12             $input.select();
13         };

 1  var switchToSelect=function () {
 2 
 3             var cId = $(this).attr("id");//獲取當(dāng)前點(diǎn)擊input的id
 4             var $select = $("<select></select>");
 5             var arr=[["國有企業(yè)","集體企業(yè)","私營企業(yè)","三資企業(yè)"],["人數(shù)<20","20≤人數(shù)<300","300≤人數(shù)<1000","1000≤人數(shù)<5000","人數(shù)≥5000"]];
 6             var j=null;
 7             if(cId=="companyType"){
 8                 //var arr1=new Array("國有企業(yè)","集體企業(yè)","私營企業(yè)","三資企業(yè)");
 9                 //console.log(arr1);
10                 $select.addClass("midBtn1");
11                 j=0;
12             }
13             else if(cId=="companySize"){
14                 j=1;
15                 $select.addClass("midBtn1");
16             }
17             for(var i=0;i<arr[j].length;i++){
18                 $select.append("<option value='"+arr[j][i]+"'>" +arr[j][i]+"</option>");
19             }
20             $select.addClass(cId);
21             $select.attr("id", cId);
22             $(this).replaceWith($select);
23             $select.on("blur",switchToSpan);
24 }

 1  var switchToTextarea=function () {
 2             var cId = $(this).attr("id");
 3             var $textarea=$("<textarea cols='50' rows='6'></textarea>");
 4             $textarea.val($(this).text());
 5             $textarea.addClass(cId);
 6             $textarea.attr("id",cId);
 7             $(this).replaceWith($textarea);
 8             $textarea.on("blur",switchToSpan);
 9             $textarea.select();
10 
11         }

1     $(".spanToInput").on("click",switchToInput);
2     $(".spanToSelect").on("click",switchToSelect);
3     $(".spanToTextarea").on("click",switchToTextarea);