0

我正在整理一个简单的博客，我尝试实现的功能之一是每个帖子的评论/回复部分。在我的帖子视图中，我有一个 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>
}

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

为不够简洁的解释道歉。

4

2 回答 2

2

改用.on()：

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

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

另请注意，您可能会在这里得到重复的 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>
于 2013-05-09T20:24:09.123 回答
0

看起来您可以在页面上拥有多个 ID 为 #replyTextBox 的元素。jQuery select by id 只返回一个元素，在这种情况下是第一个。您可能应该将您的 replyTextBox 改为一个类，并选择最接近此单击的切换回复按钮的类：

 $(document).ready(function () {
    $('.toggleReply').click(function () {
        $(this).closest('.replyTextBox').toggle();
    });
});
于 2013-05-09T20:34:44.180 回答