jQuery操作编辑页面，span与input标签之间的随时转换

 1 ??????????<li> 2 ??????????????<label for="companyType">企业性质</label> 3 ????????????????<span class="companyType spanToSelect" id="companyType"></span> 4 ??????????</li> 5 ??????????<li> 6 ??????????????<label for="companySize">企业规模</label> 7 ??????????????<span class="companySize spanToSelect" id="companySize"></span> 8 ??????????</li> 9 ??????????<li>10 ??????????????<label for="companyMsg" class="companyMsgLabel">企业简介</label>11 ????????????????<span class="companyMsg spanToTextarea" id="companyMsg"></span>12 ??????????</li>13 ??????????<br>14 ??????????<br>15 ??????????<li>16 ??????????????联系方式17 ??????????????<hr>18 ??????????</li>19 ??????????<li>20 ??????????????<label for="companyAddress">企业地址</label>21 ??????????????<input type="text" name="addressSelect" id="citySelect" class="city_input" value="湖北省-武汉市-洪山区" readonly="readonly">22 ??????????</li>23 ??????????<li>24 ?????????????????<span id="companyAddress" class="companyAddress spanToInput"></span>25 ??????????</li>26 ??????????<li>27 ??????????????<label for="companyTel">企业电话</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 >企业邮箱</label>36 ??????????????<span class="companyMail spanToInput" id="companyMail"></span>37 ??????????</li>38 ??????????<li>39 ??????????????<label for="companyIp">企业网址</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");//获取当前点击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: a21 ????????????????});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");//获取当前点击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);//失去焦点时，执行switchToSpan函数12 ????????????$input.select();13 ????????};

 1 ?var switchToSelect=function () { 2 ?3 ????????????var cId = $(this).attr("id");//获取当前点击input的id 4 ????????????var $select = $("<select></select>"); 5 ????????????var arr=[["国有企业","集体企业","私营企业","三资企业"],["人数<20","20≤人数<300","300≤人数<1000","1000≤人数<5000","人数≥5000"]]; 6 ????????????var j=null; 7 ????????????if(cId=="companyType"){ 8 ????????????????//var arr1=new Array("国有企业","集体企业","私营企业","三资企业"); 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);