Javascript 使信息仅显示在单击按钮的行中

到目前为止，我已经创建了一个脚本，用于检测类对象.edit何时被单击，然后动态创建两个按钮来显示。应该发生的是，只有单击按钮的行才会显示按钮，但现在它会显示所有行中的按钮。这是因为必须循环模型并显示所有数据条目。我曾想过使用唯一ID，但我不太明白如何使用这种方法，或者是否有更好的方法来执行此操作

我在javascript中创建的for循环，其最初的想法是循环所有条目，但在整个循环中只显示一次按钮，但仍然导致所有显示按钮的行

@foreach (var item in Model.Records){
<tr id="@item.RowIndex">
<td>
<button type="button" data-id="{{@item.RowIndex->id}}" id="triggerEditing" value="@item.RowIndex" class="btn btn-primary edit">Edit</button><br /><br /><br />
                <p class="dummy_field" data-id="{{@item.RowIndex->id}}" id="dummy_field"></p>
</td>
</tr>
}

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
                $('body').on('click', '.edit', edit);
                function edit() {   

                    var edit = $(this);
                    var value = edit.val();
                    edit.hide();
                    $('select')
                    for (var i = 0; i < $('.edit').length; i++) {
                        if (i = 1) {
                            var cancelBtn = ('<button class="btn btn-primary cancel">Cancel</button>');
                            $('#dummy_field').append(cancelBtn);
                            var saveBtn = ('<button class="btn btn-primary save" id="save">Save Changes</button>');
                            $("#save").attr('value', value)
                            $('#dummy_field').append(saveBtn);
                            break;
                        }
                    }                             

                    $(".cancel").click(function cancel() {
                        edit.show();
                        document.getElementById("save").style.visibility = "hidden";
                        document.getElementById("cancel").style.visibility = "hidden"; 
                    });


        });

    </script>

@foreach（Model.Records中的变量项）{
编辑

}
$（文档）.ready（函数（）{
$（'body'）。打开（'click'，'edit'，'edit'）；
函数编辑（）{
var edit=$（此值）；
var value=edit.val（）；
edit.hide（）；
$（“选择”）
对于（变量i=0；i<$（'.edit'）。长度；i++）{
如果（i=1）{
var cancelBtn=（'Cancel'）；
$（“#虚拟_字段”）.append（cancelBtn）；
var saveBtn=（“保存更改”）；
$（“保存”）.attr（'value'，value）
$（“#虚拟_字段”）.append（saveBtn）；
打破
}
}                             
$（“.cancel”）。单击（函数取消（）{
edit.show（）；
document.getElementById（“保存”）.style.visibility=“隐藏”；
document.getElementById（“取消”）.style.visibility=“隐藏”；
});
});

单击的按钮和每行中的虚拟_字段都具有匹配的

数据id

属性。因此，您可以简单地将虚拟_字段实例作为目标，该实例与单击的按钮具有相同的数据id。或者您可以获得单击按钮的父元素（将是一个表单元格）还有很多非常简单的方法。你可以简单地用谷歌搜索jquery函数来获取数据属性和/或查找父元素。另外，你在虚拟_字段上创建了重复的ID，因为如果表中有很多行，你将得到很多

@ADyson谢谢你或者共享此信息。我甚至没有想过尝试获取数据id或查找与此相关的父项和子项。@ADysonare您可以在基于数据id的p标记的位置附加一个按钮吗？例如：var dataId=$（“.dummy_field”）.data（“id”）；然后执行$（dataId）.append（cancelBtn）；差不多。您可以将dataId作为标识正确元素的一部分包含在内。下面是一个直接示例：