在MVC中使用jQuery在DisplayFor和EditorFor之间切换

在我的视图中，必须有一种在DisplayFor和EditorFor div之间切换的方法。我想单击显示字段旁边的“编辑”按钮，隐藏DisplayFor元素，并显示EditorFor字段。更新完文本后，我希望在编辑器字段中提交表单和数据

我不知道为什么这不起作用，tips

我的jQuery

<script type="text/javascript">

function myFunction(element) {

    $(element).find("span.item-display").html($(element).find("span.item-field").find(":input:first").val());
    $(element).find("span.item-display")
        .show()
        .next("span.item-field")
        .hide();
}

函数myFunction（元素）{
$（元素）.find（“span.item显示”）.html（$（元素）.find（“span.item字段”）.find（“：input:first”）.val（））；
$（元素）.find（“span.item显示”）
.show（）
.next（“跨度项目字段”）
.hide（）；
}

我的HTML视图

<dt><strong>@Html.LabelFor(m => m.FirstName) </strong></dt>
        <dd>
            <span class="item-display">
                @Html.DisplayFor(m => m.FirstName)
            </span>
            <span class="item-field" style="display:none">
                @Html.EditorFor(m => m.FirstName)
            </span>

            <span>
                <button type="button" onclick="myFunction(this)" />

            </span>
        </dd>

@Html.LabelFor（m=>m.FirstName）
@DisplayFor（m=>m.FirstName）
@EditorFor（m=>m.FirstName）

使用Jquery切换，如下所示：

<dt><strong>@Html.LabelFor(m => m.FirstName) </strong></dt>
    <dd>
        <span class="item-display toggle-control">
            @Html.DisplayFor(m => m.FirstName)
        </span>
        <span class="item-field toggle-control" style="display:none">
            @Html.EditorFor(m => m.FirstName)
        </span>

        <span>
            <button type="button" onclick="toggler()" />

        </span>
    </dd>
  </dt>

<script>
function toggler()
{
    $(".toggle-control").toggle();
}
</script>

@Html.LabelFor（m=>m.FirstName）
@DisplayFor（m=>m.FirstName）
@EditorFor（m=>m.FirstName）
函数切换器（）
{
$（“.toggle控件”）.toggle（）；
}