我在博客应用程序中开发了一个评论编辑系统。
当用户点击选定博客帖子的页面时，@ foreach循环会遍历该帖子的评论，并在帖子的主要内容下方的视图中显示每个评论。
用户也可以编辑评论的内容。用户点击评论上的修改按钮，JavaScript功能会将其<textarea>设为可编辑，并取消隐藏＆＃34;保存＆＃34;按钮。编辑完成后，用户点击保存，第二个JavaScript函数将更新的内容发送到Controller方法，该方法更新数据库上的相关注释。
当博客文章中有一条评论时，我生成的代码工作正常，但是，当页面上有多条评论时，JavaScript无法区分引用的评论 - 例如，按一个注释上的编辑按钮使所有注释都显示保存按钮。
我是否可以通过简单的方式为每条评论封装JavaScript？
或者是为每个评论生成唯一ID的最佳方法？如果是这样，最好的方法是什么？
我的代码供您参考，但请注意我仍然是网页脚本的新手，所有指针都表示赞赏。
THE VIEW（RAZOR）：
@model List<Assignment_3.Models.CommentSubmission
//Blog Post
//Comments
@foreach (var item in Model)
{
//Comment information
//The textarea
<textarea rows="10" readonly class="descriptionForm" id="DescriptionText">@item.Body</textarea>
//The Edit button
<div style="text-align:right">
<img class="edit_icon" src=@Url.Content("~/Images/edit.png") alt='edit' height=15 width=15 />
<br />
//The Save button once editing is complete
<button type="submit"class="btn1" style="visibility: hidden">
<p class="split-btn-name">Save</p>
<span class="separator"></span>
<p><span class="glyphicon glyphicon-ok"></span></p>
</button>
</div>
}
<script>
//Make textarea editable and unhide the edit save button
$(document).ready(function () {
$(".edit_icon ").click(function () {
$(".descriptionForm").removeAttr("readonly");
$(".btn").removeAttr("style");
});
});
//Send updated content to Controller and update database
$(".btn1").click(function () {
$(".btn1").hide();
$(".descriptionForm").setAttribute('readonly');
var text1 = document.getElementById('DescriptionText').value;
var url = "/Comments/EditComment?id=@item.Id&s="+ text1;
$.post(url, null, function (data) {
});
});
</script>
控制器：
public void EditComment(int id, string s)
{
var cS = _context.CommentSubmissions
.Where(c => c.Id == id).
FirstOrDefault();
//The Comment's text body
cS.Body = s;
_context.Entry(cS).State = EntityState.Modified;
_context.SaveChanges();
}
更新
答案（感谢格雷格）：
表格：
<div class="row" style="padding: 15px;">
<div data-rel="@item.Id">
<textarea rows="10" readonly class="textarea">@item.Body</textarea>
<div style="text-align:right">
<p>
Edit <img class="edit_icon" src=@Url.Content("~/Images/edit.png") alt='Edit' height=15 width=15 id="EditIcon" />
</p>
@*The Save button once editing is complete*@
<input type="button" data-input="edit" value="Save" style="visibility: hidden" id="saveButton">
</div>
</div>
</div>
JQUERY：
<script>
$(function () {
$(".edit_icon").click(function () {
var container = $(this).closest('.row');
var id = parent.find('div[data-rel]');
var content = container.find('.textarea');
var button = container.find('#saveButton');
button.removeAttr("style");
content.focus();
content.removeAttr('readonly');
});
$("#saveButton").click(function () {
var container = $(this).closest('.row');
var id = container.find('div[data-rel]');
var content = container.find('.textarea');
var button = container.find('#saveButton');
button.hide();
content.prop('readonly', true);
var text1 = descriptionForm.value;
var url = "/Comments/EditComment?id=" + id + "&s=" + text1;
$.post(url, null, function (data) {
});
});
});
</script>
答案 0 :(得分：1)
如评论所示，您的JavaScript没有任何独特的锚定。因此，它会修改符合您条件的所有元素，以解决此问题，您可以使用唯一标识符或更好地构建标记来实现。
在您的情况下，您有一个type="submit"的按钮会立即导致回复。不确定这是否确实是你的意图，但你可以这样做：
@foreach(var content in Model)
{
<form name="content.Id" action="Blog/Save" method="post">
</form>
}
在这种情况下，您提交的帖子可以直接命中服务器。但是，回帖并不酷。要通过Ajax纠正，你可以做到。
@foreach(var content in Model)
{
<div class="container">
<div data-rel="@content.Id">
<!-- Put form data, or whatever here. -->
<input type="button" data-input="edit">Edit</input>
</div>
</div>
}
现在您拥有一个独特的价值，清晰的结构，您可以非常轻松地在整个层次结构中移动。因此，对于JavaScript，您可以这样做：
function editBlog(element) {
var container = document.querySelector(element).closest('[data-rel]');
}
我认为这是JavaScript的理想方法，我是jQuery的自定义或像Vue这样的框架。所以仔细检查语法。但理论上，JavaScript将从按钮事件扩展到父节点，然后检索子ID。可能会出现类似的映射或模板，因此您可以将数据发布到您的操作中。
希望这有帮助。
更新：您可能会收到一些域错误，但我希望不会。无论如何，这是一个非常简单的例子。
重点是，jQuery将从按钮，列，行，行ID到容器递归。但是，它不会影响页面上的任何其他元素。如果更改了jQuery，则不会影响特定元素，例如：
$('button').click(function (e) {
$(this).text('Edit'); // Only this element
$('button').text('Edit'); // All button elements
});
$(function () {
$('button').click(function () {
var container = $(this).parents('.container');
var id = parent.find('div[data-rel]');
var rows = parent.find('.row');
var columns = parent.find('.column');
alert('The section id: ' + id.val());
console.log(container.html());
console.log(id);
console.table(rows);
console.table(columns);
});
});.container {
width: 100%;
padding: 1rem;
box-shadow: 2px -1px 1px -2px, -1px 2px 1px -2px;
}
.row {
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
}
.column {
width: 33.3%;
}
.column:last-of-type {
width: 10%;
}
.column span {
width: 100%;
padding: .2rem;
display: inline-block;
}
.column label {
width: 95%;
}
.column button {
width: 100px;
}
.column input, .column textarea {
width: 95%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div data-rel="1">
<div class="row">
<div class="column">
<span>
<label>Article Name:</label>
<input type="text" data-rel="txtArticleName" />
</span>
<span>
<label>Article Date:</label>
<input type="text" data-input="txtArticleDate" />
</span>
</div>
<div class="column">
<label>Article Summary:</label>
<textarea data-input="txtArticleSummary" rows="5"></textarea>
</div>
<div class="column">
<button name type="button" onclick="return false;">Save</button>
</div>
</div>
</div>
</div>
<div class="container">
<div data-rel="2">
<div class="row">
<div class="column">
<span>
<label>Article Name:</label>
<input type="text" data-rel="txtArticleName" />
</span>
<span>
<label>Article Date:</label>
<input type="text" data-input="txtArticleDate" />
</span>
</div>
<div class="column">
<label>Article Summary:</label>
<textarea data-input="txtArticleSummary" rows="5"></textarea>
</div>
<div class="column">
<button type="button" onclick="return false;">Save</button>
</div>
</div>
</div>
</div>
代码有效，但您可能启用了安全性，但可能无法使用它。但这个例子是重要的部分。