jquery切換元素進行編輯

嗨即時嘗試創建一個編輯腳本在jQuery中，將p內容更改爲輸入字段，並讓人們編輯它們，然後恢復到內容。jquery切換元素進行編輯

我的代碼：

<div class="addressblock"> 
<div class="data"> 
<p name="bedrijfsnaam">company name</p> 
<p name="tav">to whom</p> 
<p name="adres">street and number</p> 
<p name="postcode">1234AB</p> 
<p name="woonplaats">city</p> 
<p name="land2" >Land</p> 
</div> 
<a href="#_" class="editinv" id="00001" name="edit">Edit</a> 
</div>

的Jquery =

$(document).ready(function() { 

$(".editinv").click(function() { 

    var editid = $(this).attr("id"); 
    var edit_or_text = $(this).attr("name"); 

    if(edit_or_text == "edit"){ 


    $(this).closest('div').find('p').each(function(){ 

    var el_naam = $(this).attr("name"); 
    var el_content = $(this).text(); 

    $(this).replaceWith("<input type='text' name='"+el_naam+"' id='" + el_id + "' value='"+el_content+"' />"); 


}); 
$(".editinv").replaceWith("<a href='#_' class='editinv' name='done' id='"+editid+"'>Done</a>"); 

} 

if(edit_or_text == "done"){ 

    $(this).closest('div').find('input').each(function(){ 

    var el_naam = $(this).attr("name"); 
    var el_content = $(this).attr("value"); 

    $(this).replaceWith("<p name='"+el_naam+"' id='" + el_id + "'>'"+el_content+"' </p>"); 


}); 
$(".editinv").replaceWith("<a href='#_' class='editinv' name='edit' id='"+editid+"'>Bewerken</a>"); 

} 

}); 
});

當編輯單擊它完全改變了輸入字段和改變編輯按鈕以完成按鈕。點擊完成按鈕從來沒有註冊，雖然類是相同的。

任何人有任何想法？

在此先感謝！

編輯：我創建了這個問題的的jsfiddle http://jsfiddle.net/hBJ5a/

它很簡單，爲什麼不接受元素第二個點擊後已經恢復被改變？

來源

2013-10-23 Snuur

更改您的提琴：HTTP：//的jsfiddle。淨/ SAERE/2/ – Sorprop

請注意，如果您將所有<p>標記的名稱更改爲相同名稱，並嘗試將它們還原回去，那麼JavaScript將無法知道哪個值應該到達哪裏。

您應該爲您的<p>標記添加一個附加參數，以指示類型。

例如

<p data-type="text" name="bedrijfsnaam">compname</p>

下進行更改會變成：

<input type="text" name="bedrijfsnaam" data-type="edit" value="compname" />

當你點擊按鈕返回，您只需要使用您當前正在使用改變<p>相同功能的成<input>的，但然後顛倒順序。

例如

function inputToParagraph() { 

    var inputs = $('input[data-type="edit"]'); 
    inputs.each(function() { 
     $(this).replaceWith('<p data-type="text" name="'+$(this).attr('name')+'">'+$(this).attr('value')+'</p>'); 
    }); 
}

ofcourse你應該有其他操作鏈接到您的提交，也可能更新數據庫的ajax請求。

注意未測試，但知道上述功能，如果所有的attr的指定將工作。它將直接用具有給定屬性的P標籤替換輸入。

您必須確保當您將<p>設置爲<input>時，您必須確保輸入信息也具有正確的屬性。

來源

2013-10-23 10:44:54 SidOfc

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script type="text/javascript"> 
     var clickHandler = function() { 
      var editid = $(this).attr("id"); 
      var edit_or_text = $(this).attr("name"); 
      if (edit_or_text == "edit") { 
       $(this).closest('div').find('p').each(function() { 
        var el_id = $(this).attr("id"); 
        var el_naam = el_id; //$(this).attr("name"); 
        var el_content = $(this).text(); 
        $(this).replaceWith("<input type='text' name='" + el_naam + "' id='" + el_id + "' value='" + el_content + "' />"); 
       }); 
       $(".editinv").replaceWith("<a href='#_' class='editinv' name='done' id='" + editid + "'>Done</a>"); 
      } 
      else /* if (edit_or_text == "done") */ { 
       $(this).closest('div').find('input').each(function() { 
        var el_id = $(this).attr("id"); 
        //var el_naam = el_$(this).attr("name"); 
        var el_content = document.getElementById(el_id).value; 
        // Attribute "name" not allowed on element "p" at this point 
        //$(this).replaceWith("<p name='" + el_naam + "' id='" + el_id + "'>'" + el_content + "' </p>"); 
        $(this).replaceWith("<p id='" + el_id + "'>" + el_content + "</p>"); 
       }); 
       $(".editinv").replaceWith("<a href='#_' class='editinv' name='edit' id='" + editid + "'>Bewerken</a>"); 
      } 
      document.getElementById("00001").onclick = clickHandler; 
     } 

     $(document).ready(function() { 
      document.getElementById("00001").onclick = clickHandler; 
     }); 
    </script> 
    <style type="text/css"> 

    </style> 
</head> 
<body> 
    <div class="addressblock"> 
     <div class="data"> 
      <!-- Attribute "name" not allowed on element "p" at this point --> 
      <p id="bedrijfsnaam">company name</p> 
      <p id="tav">to whom</p> 
      <p id="adres">street and number</p> 
      <p id="postcode">1234AB</p> 
      <p id="woonplaats">city</p> 
      <p id="land2">Land</p> 
     </div> 
     <a href="#_" class="editinv" id="00001" name="edit">Edit</a> 
    </div> 
</body> 
</html>

測試與Firefox 24.0/Linux的

來源

2013-10-23 12:10:19

好的謝謝，但你爲什麼要將el_naam更改爲el_id？該id是用於整個地址條目的，名稱是針對各個部分的。像這樣，我不知道什麼領域是什麼時候發佈權利？ – Snuur

「name」屬性與所使用的不符合標準，請參閱「此屬性p上不允許註釋」屬性名稱「，它取自我的NetBeans IDE的語法檢查。在「輸入」標籤中，「名稱」屬性是可以接受的。例如，如果你想實現多個「地址欄」，你可以將「bedrijfsnaam」這樣的id和「bedrijfsnaam00001」這樣的「a」標記的id結合起來。如果我的回答對你有幫助，我會爲快樂而感到高興。 –

嘗試的jQuery插件編輯

演示：http://www.appelsiini.net/projects/jeditable/default.html

來源

2013-10-23 12:30:49 fewtalks

jquery切換元素進行編輯

回答

相關問題