jQuery - 當鏈接被點擊並隱藏段落時顯示編輯textarea表格

我有一堆列在頁面上的項目。每個項目都有一個編輯鏈接。jQuery - 當鏈接被點擊並隱藏段落時顯示編輯textarea表格

當用戶點擊它時，我想隱藏段落並使用包含文本的textarea顯示窗體。默認情況下，僅在單擊「編輯」鏈接時，窗體纔會隱藏並顯示給用戶。我如何顯示切換與該段落的形式？

事情是這樣的：

enter image description here

下面是關於這一些簡單的代碼：

<div> 
    <p id="message">The quick fox stuff</p> 

    <form id="editForm" style="display: none;"> 
     <textarea rows="2" id="editMessage" /></textarea> 
     <input type="submit" value="Save"></input> 
    </form> 

    <a href="#">Edit Link</a> 
</div>

來源

2015-07-19 user2818430

請添加相關的HTML以及 – Dhiraj

如何使用'contenteditable'屬性？ – Terry

因爲有許多項目，如這些，請使用類而不是ID作爲ID應該是唯一的。

使用.closest()或.parent()來獲得父div。使用父母找到p.message和form.editform。

這樣的事情應該做。

$('a.edit-link').on('click', function(e){ // 
    e.preventDefault(); 
    var $parent = $(this).closest('div'); // or var $parent = $(this).parent(); 
    $parent.find('p.message').hide(); // use slide methods fancy show/hide are required 
    $parent.find('form.editForm').show(); 
    // Not sure but you'd want to hide <a href="#">Edit link </a> after clicking 
    // in that case use the below 
    // $(this).hide(); 
});

結構會是這個樣子

<div> 
    <p class="message">The quick fox stuff</p> 

    <form class="editForm" style="display: none;"> 
     <textarea rows="2" id="editMessage" /></textarea> 
     <input type="submit" value="Save"></input> 
    </form> 

    <a href="#" class="edit-link">Edit Link</a> 
</div>

一個簡單的演示http://jsbin.com/nurixo/edit?js,output

來源

2015-07-19 15:13:55 Dhiraj

謝謝！這是完美的！一個簡單的問題：如何切換鏈接文本，如「編輯」 - 「取消」？ – user2818430

如何擁有兩個定位標籤用於取消和編輯鏈接。然後有另一個點擊處理程序取消定位標記 – Dhiraj

請參閱此演示http://jsbin.com/nurixo/edit?js,output – Dhiraj

我想你將不得不創建「編輯表單」爲模板或contentEditable去

如果用「Edit Form」作爲模板;

<span style="display:none;" id="editForm_template"> 
<form action="control.php" method="post"> 
<textarea class="templateTextarea"></textarea> 
</form> 
</span>

與jQuery

<script> 
$(document).ready(function(e){ 
    ////////Make the edit button as a class. 
    $(document).on('click', '.editButton', function(){ 
     //Get the parent of both the edit button and the paragraph 
     var parent = $(this).parent('.parentOfBoth'); 
     var editFormTemplate = $('#editForm_template').html(); 
     var currentTextInParagraph = $(parent).find('.paragraphTobeEditted'); 
     $('.templateTextarea').val(currentTextInParagraph); 
     $(parent).slideUp('fast',function(){ 
      // Append the template after the parent of both the paragraph and edit button have been hidden (slideUp) 
      $(parent).after(editFormTemplate); 
      }); 
    }); 
}); 
</script>

在HTML5任何元素都可以編輯

<!DOCTYPE html> 
<html> 
    <body> 
    <div contentEditable="true"> 
     This text can be edited by the user. 
    </div> 
    </body> 
</html>

來源

2015-07-19 15:16:54 Relm

試試這個..

HTML

<div> 
    <p id="message">The quick fox stuff</p> 

    <form id="editForm"> 
     <textarea rows="2" id="editMessage" /></textarea> 
     <input type="submit" value="Save" onclick="saveMsg(event);"></input> 
    </form> 

    <a href="javascript:editLink();">Edit Link</a> 
</div>

CSS

#editForm{ 
    display: none; 
}

純JavaScript

function editLink(){ 
    document.getElementById("editForm").style.display = "block"; 
    document.getElementById("message").style.display = "none"; 
    var message = document.getElementById("message").innerHTML; 
    document.getElementById("editMessage").value = message; 
} 
function saveMsg(e){ 
    e.preventDefault(); 
    document.getElementById("editForm").style.display = "none"; 
    document.getElementById("message").style.display = "block"; 
}

看看這個Fiddle

來源

2015-07-19 15:19:02 Malik

這裏是一個可能的解決方案：

CSS：

#editForm { display:none; }

JS：

$(document).ready(function() { 
 
    $('a').click(function() { 
 
     var div = $(this).parent('div'); 
 
     div.find('p').toggle(); 
 
     div.find('form').toggle(); 
 
    }); 
 
});

演示在這裏：http://jsfiddle.net/oj7o6p96/

希望它有幫助。

來源

2015-07-19 15:20:21 Ash

jQuery - 當鏈接被點擊並隱藏段落時顯示編輯textarea表格

回答

相關問題