Question

我有一个ASP.NET mvc项目，其中有一个添加注释的功能。我希望在点击回复按钮时，创建视图会在该特定注释之后的空间加载。 Reply（）函数用于加载它。但是，即使我点击任何评论下面的回复按钮，创建视图也会在第一个评论之后加载到空间中。下面的代码在ShowComments视图中，我在任何其他视图的末尾呈现

@foreach (var item in Model)
        {
                //code to display other properties of comment object
                <section onclick="Reply()" class="btn btn-default">
                    Reply
                </section>
                <div id="ReplyCommentBox">

                </div>      
        }

回复功能有以下一行

$('#ReplyCommentBox').load('http://localhost:5414/Comments/Create/');

请帮助找出解决方案，以便在点击回复按钮的评论之后加载创建视图。

Answer 1

@foreach (var item in Model)
    {
            //code to display other properties of comment object
            <section class="btn btn-default reply-btn">
                Reply
            </section>
            <div class="ReplyCommentBox">

            </div>      
    }

当你通过id访问元素时，在jQuery中，它获得了第一个带有匹配选择器的元素。这就是总是添加到第一行的原因。在你的情况下，你必须使用类而不是id，因为有相同类的多个元素

$(document).on('click', '.reply-btn', function(){
    var replyBox = $(this).next('.ReplyCommentBox');
    var boxContent = $.trim(replyBox.html())

    if(boxContent){
        # if the `ReplyCommentBox` has content empty it
        replyBox.html('');
    }else{
        # no content, so load the div with content
        replyBox.load('http://localhost:5414/Comments/Create/');
    }
})

这将检查ReplyCommentBox是否包含任何内容。如果它有任何内容，它将删除它，否则它将加载评论视图。

Ajax仅在第一行

1 个答案: