javascript - 如何使用一种形式获取动态文本

Question

我有一个评论回复系统，当我尝试回复评论时，第一个回复正常。

对于任何后续回复，我可以获得要提交的评论 ID 和文章 ID，但我无法获取回复文本值。

我如何根据下面的 Razor 代码每次都对所有回复进行这项工作？

<h4>Comments</h4>
<hr />
@foreach (var item in Model.Comments.ToList())
{
    <!-- Single Comment -->
    <div class="media mb-4">
        <img style="height:40px; width:40px;" class="d-flex mr-3 rounded-circle" src="@item.User.Photo" alt="@item.User.FullName">
        <div class="media-body" style="width:400px;">
            <h5 class="mt-0">@item.User.UserName</h5>
            <div>
                <p style="word-break:break-all">
                    @item.Paragraph
                    @if (Convert.ToInt32(Session["UserId"]) == item.UserId)
                {
                        <a class="btn btn-danger" href="/Home/DeleteComment/@item.CommentId">
                            Delete
                        </a>

                        <div style="height:10px;"> <a id="post_id_1" name='comment1' class="showReply" href="javascript: void(0)">Reply</a></div>
                    }
                </p>
                <p style="font-size:small"><b>Yorum Tarihi:</b>@String.Format("{0: d MMMM yyyy}", item.Date)</p>
            </div>
            <!--Reply Form-->
            <div id="replymsgbox" style="display: none;">
                <form id="frmComment" novalidate="novalidate" method="POST" name="frmComment">
                    <div>
                        <textarea id="replytext" class="" name="comment1[text]"></textarea>
                        <div id="error_text"> </div>
                    </div>
                    <div>
                        <input id="@item.CommentId" class="reply" type="submit" value="Cevapla" name="Submit">
                    </div>
                </form>
            </div>


            @foreach (var reply in Model.ReplyComments.Where(x => x.CommentId == item.CommentId).ToList())
            {
                <div class="media mt-4">
                    <img style="height:40px; width:40px;" class="d-flex mr-3 rounded-circle" src="@item.User.Photo" alt="@item.User.FullName">
                    <div class="media-body">
                        <h5 class="mt-0">@reply.User.UserName</h5>
                        <p>@reply.Paragraph</p>
                        @if (Convert.ToInt32(Session["UserId"]) == item.UserId)
                        {
                            <a class="btn btn-danger" href="/Home/DeleteReply/@reply.ReplyCommentId">
                                Sil
                            </a>
                        }
                    </div>
                </div>
            }
        </div>
    </div>

这是我的javascript代码

<script type="text/javascript">

$(document).ready(function () {

    $('a.showReply').on("click", function (e) {
        $(this).parent("div").parent("div").next("div").slideToggle();
    });

    $(".reply").click(function (e) {

        e.preventDefault();
        var r_comment = $("#replytext").val();
        var r_commentid = parseInt($(this).attr("id"));
        $.ajax({
             url: '/Home/ReplyComment/',
             data: { replycomment: r_comment, articleid:@Model.ArticleId, commentid: r_commentid },
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                alert("Cevap gönderildi");
                window.location.reload();

            }
        });

});
})

Answer 1

您生成了多个元素，其 ID 为 replytext。在您的点击代码中，以及几乎所有其他地方，您都使用类引用作为选择器，这很好。对于回复文本，尽管您有:

var r_comment = $("#replytext").val();

当 ID 重复时，您正试图通过 ID 引用元素。您将需要为您的元素提供唯一的 ID，或者找到一种不同的方式，就像您尝试使用多个 .parent() 选择器或某些搜索那样手动遍历 DOM。

在点击事件中，this 的上下文应该是按钮本身。这意味着使用 this，您可以向上遍历一两个父对象并向下遍历子对象以找到已填充的文本区域。你也可以试试

var r_comment = this.closest("form > textarea").val(); 

理论上应该遍历到上面堆栈中最近的表单，然后再次向下遍历到您的文本区域元素。尝试将调试器添加到您的 onclick 中，并尝试使用 DOM 来查看您的位置和需要的位置，但如果不是您需要的，该代码片段应该可以让您到达那里。

顺便说一句，如果将来你打算将生成的 Razor 标记与 JS 混合使用，通常最好使用 for 循环为索引分配唯一 ID，这样无论你身在何处，都可以基于您当前拥有的控件 ID 的直接 ID 元素查找。