javascript - 使用 Javascript (MVC) 在按钮单击时将特定 div contenteditable 设置为 true

Question

我使用 foreach 向 div 中填充数据:

@foreach (var item in Model.EmploymentDetailsList)
                    {
                        <li>
                            <i class="fa fa-user bg-aqua"></i>
                            <div class="timeline-item">
                                <span class="time"><i class="fa fa-clock-o"></i> Current</span>
                                <h3 class="timeline-header">@item.Position at <a href="@item.EmploymentCompanyWebsite">@item.EmploymentCompany</a></h3>
                                <div id="page-wrapper">
                                    <section>
                                        <div id="editor" class="diveditor timeline-body">
                                            <input type="hidden" class="pkiEmploymentDetailID" value="@item.pkiEmploymentDetailID" />
                                            @Html.Raw(item.PositionDetails)
                                        </div>
                                    </section>
                                </div>
                                <div class="timeline-footer">
                                    <button id="editorBtn" type="button" class="edit-button btn btn-primary btn-xs">Edit</button>
                                    @*<a class="btn btn-primary btn-xs">Edit</a>*@
                                </div>
                            </div>
                        </li>

                                            <!-- timeline time label -->
                        <li class="time-label">
                            <span class="bg-red">
                                @item.StartDate
                            </span>
                        </li>
                    <!-- /.timeline-label -->
                    }

我尝试使用以下 JS 根据在该 div 中单击的按钮将特定 div 的 contenteditable 设置为 true:

<script>
        //var editorBtn = document.getElementById('editorBtn');
        //var element = document.getElementById('editor');

        $('.edit-button').on('click', function () {
        //editorBtn.addEventListener('click', function (e) {
            // e.preventDefault();
            //alert("Button Clicked");

            if ($('.diveditor').attr('contenteditable', 'false')) {
                // Disable Editing
                //This code runs when you click Save
                alert("Button Editable works");
                //alert(element.innerHTML);

                //TODO: Do Ajax call to save content to  Database
                var ProfileDetails =
               {
                   "EmploymentDetails": element.innerHTML
               };

                $.ajax({
                    url: '/Profile/Save_Employment/',
                    data: JSON.stringify(ProfileDetails),
                    datatype: 'json',
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        $('.diveditor').attr('contenteditable', 'false');
                        $('.edit-button').innerHTML = 'Edit';
                        // You could save any changes here.
                    }
                });


            } else {
                //This code runs when you click Edit
                $('.diveditor').attr('contenteditable', 'true');
                $('.edit-button').innerHTML = 'Save';
                $('.diveditor').focus();
            }
        });
    </script>

因此，正如您所看到的，所有 Div 和按钮都具有相同的名称，我只想编辑我单击按钮的特定 Div(编辑按钮) - 我已经使用 webgrid 完成了类似的操作类名。

目前，它将焦点设置为最后一个 Div，而不是我想要的 Div。它也不会将按钮从“编辑”更改为“保存”。

有更好的方法吗？或者有人可以帮助我解决我做错的事情。

Answer 1

您可以使用 data- 属性来告诉您的脚本，哪个元素现在应该是可编辑的，并为每个 div 提供自己的 id 属性，如下所示。

<div id="editor_@item.pkiEmploymentDetailID" class="diveditor timeline-body">
    <input type="hidden" class="pkiEmploymentDetailID" value="@item.pkiEmploymentDetailID" />
   @Html.Raw(item.PositionDetails)
</div>

<button id="editorBtn" type="button" class="edit-button btn btn-primary btn-xs" data-edit="@item.pkiEmploymentDetailID">Edit</button>

并且在您的 jQuery 脚本中，如果您将参数传递给单击处理程序，您就知道单击了哪个元素。有了这些信息，您可以阅读data-edit并使特定的div可编辑。

$('.edit-button').on('click', function (event) {
    var clicked = $(event.target);
    var editableId = "editor_" + clicked.data("edit");
    // make element with id=editableId editable

    if ($('#'+editableId).attr('contenteditable', 'false')) {
        /* code */
    }
    else
    {
        $('#'+editableId).attr('contenteditable', 'true');
        clicked.html('Save');
        $('#'+editableId).focus();
    }
}

这种方法允许您更改 HTML 结构，而不必担心破坏 JS 中的某些内容。