Question

我正在组建一个简单的博客，我试图实现的功能之一是每个帖子上的评论/回复部分。在我的帖子视图中，我有一个foreach循环，打印该帖子的所有评论。

@foreach (var comments in Model.Post.Comments)
{
if (comments.ReplyToId == 0)
{
    <p>@comments.Body <span><a href="#" class="toggleReply">Reply</a></span></p>

    <div id="replyTextBox" style="display:none">
        @using (Html.BeginForm("Reply", "Comment", FormMethod.Post))
        {
            <input type="hidden" name="PostId" value="@Model.Post.PostId" />
            <input type="hidden" name="CommentId" value="@comments.CommentId" />
            <input type="text" name="Body" id="CommentBody" />
            <input type="submit" value="Submit" />
        }
    </div>
}

foreach (var reply in Model.Post.Comments)
{
    if(reply.ReplyToId == comments.CommentId)
    {
        <ul>
            <li>@reply.Body</li>
        </ul>    
    }
}
}

我有一个if语句，用于检查数据库以查看注释是新注释还是对注释的回复。每个新评论都包含一个回复按钮，允许用户回复评论。我在此按钮中添加了一些jquery来隐藏或显示回复文本框。

这是jquery代码：

@section scripts {
<script type="text/javascript">
    $(document).ready(function () {
        $('.toggleReply').click(function () {
            $('#replyTextBox').toggle();
        });
    });
</script>
}

我遇到的问题是，由于这些回复文本框的动态特性，只有第一个按钮似乎显示文本框。当我点击其他前面的回复按钮时，只有第一个回复按钮的文本框会受到影响。

对于不太简洁的解释道歉。

Answer 1

改为使用.on()：

<script type="text/javascript">
    $(document).on('click', '.toggleReply', function () {
        $('#replyTextBox').toggle();
    });
</script>

这将订阅与选择器（#toggleReply）匹配的所有DOM元素的click事件，即使它们在最初加载DOM时不存在但随后添加。因此，您无需将此代码包装在$(document).ready()中，如我的代码示例所示。

另请注意，您最终可能会遇到重复的ID，导致无效的DOM：

<input type="text" name="Body" id="CommentBody" />

与#replyTextBox相同。

您可能需要解决此问题：

@foreach (var comments in Model.Post.Comments)
{
    if (comments.ReplyToId == 0)
    {
        <p>@comments.Body <span><a href="#" class="toggleReply">Reply</a></span></p>

        <div class="replyTextBox" style="display:none">
            @using (Html.BeginForm("Reply", "Comment", FormMethod.Post))
            {
                <input type="hidden" name="PostId" value="@Model.Post.PostId" />
                <input type="hidden" name="CommentId" value="@comments.CommentId" />
                <input type="text" name="Body" />
                <input type="submit" value="Submit" />
            }
        </div>
    }

    foreach (var reply in Model.Post.Comments)
    {
        if (reply.ReplyToId == comments.CommentId)
        {
            <ul>
                <li>@reply.Body</li>
            </ul>    
        }
    }
}

并相应地调整您的脚本：

<script type="text/javascript">
    $(document).on('click', '.toggleReply', function () {
        $(this).next('.replyTextBox').toggle();
    });
</script>

Answer 2

看起来您可以在页面上使用id为#replyTextBox的多个元素。 jQuery select by id只返回一个元素，在本例中是第一个元素。您应该将replyTextBox改为一个类，并选择最接近此单击切换回复按钮的那个：

 $(document).ready(function () {
    $('.toggleReply').click(function () {
        $(this).closest('.replyTextBox').toggle();
    });
});

具有相同类的多个切换按钮

2 个答案: