Question

我在页面上列出了一堆项目。每个项目都有一个编辑链接。

当用户点击它时，我想隐藏段落并显示包含文本的textarea的表单。默认情况下，只有单击“编辑”链接时，表单才会隐藏并显示给用户。如何显示使用段落切换表单？

这样的事情：

enter image description here

以下是一些关于此的快速代码：

Math.Ceiling(value)
//Do your computations to get the .5

Answer 1

由于有很多这样的项目请使用类而不是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

Answer 2

我想您必须将“编辑表单”创建为模板，或者使用contentEditable

如果您使用“编辑表单”作为模板;

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

Answer 3

试试这个..

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

Pure 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

Answer 4

以下是一种可能的解决方案：

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/

希望它有所帮助。

jQuery - 单击链接时显示编辑textarea表单并隐藏段落

4 个答案: