javascript - 如何启用页内编辑功能？

Question

如何在单击按钮后使页面的一部分可编辑？ (即在同一页面上编辑和阅读)

例如，当您在此页面(您现在正在阅读的页面)上单击“编辑”时，标题和正文是可编辑的(它们更改为输入元素)，它不会重定向到编辑页面以便更改标题或正文。所以，我想启用即时版本。

看起来这与jquery有关，但我不知道如何实现这一点。

Answer 1

您可以使用隐藏的输入，并在单击编辑按钮时显示它们，同时隐藏可读的内容，如下例所示。

希望这有帮助。

$('.edit-page').on('click', function(){
    $('.title, .body').hide(); //Hide readable part
    $('.edit-title, .edit-body').show(); //Show editable part
})

.edit{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Readable part -->
<span class='title'>Your title HERE</span>
<input type="text" class="edit edit-title" value='Your title HERE'/>
</br>

<!-- Editable part -->
<span class='body'>Your body HERE</span>
<textarea class="edit edit-body">Your body HERE</textarea>

</br></br>

<button class="edit-page">Edit</button>