为每个帖子添加可扩展的文本框

Add an expandable text box to every post

本文关键字：可扩展的 文本 添加      更新时间：2023-09-26

所以我正在构建一个评论系统，并将一堆评论加载到一个页面，然后为每个评论生成一个回复框。下面是我的回复框的样子，但每页上都有许多相同的回复框。如您所见，第一部分是一个div，其中包含回复框的切换（显示/隐藏）。

我正在发帖，因为我无法让回复切换为触发。

这是我的网页：

 <div class="col-sm-offset-1 col-sm-11">
    <a href="#" id="reply-toggle">
        <span class="text">Reply</span>
        <i class="toggle-icon fa fa-angle-down"></i>
    </a>
</div>
<div id="reply-div" class="col-sm-12">
    <form class="form-horizontal" role="form" accept-charset='UTF-8' data-parsley-validate novalidate>
        <fieldset>
            <div class="form-group">
                <label for="ticket-message" class="col-sm-1 control-label"></label>
                <div class="col-sm-11">
                    <textarea class="form-control" name="post-body" id="new_post_textarea" rows="5" cols="30" placeholder="Try to be as specific as possible when posting!"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-1 col-sm-11">
                    <button id="submit_reply_button" type="submit" class="btn btn-primary btn-block">Submit Reply</span></button>
                </div>
            </div>
        </fieldset>
    </form>
</div>

这是我的jquery：

$("#reply-toggle a").click(function() {
                alert("running");
                $('#reply-div').slideToggle("slow");
            )};
我认识到我在jquery

方面不是很好，所以我确信这很简单，但是，我也认识到我将不得不使用jquery（closest）来仅切换与正确评论线程关联的回复框。我还没有走到这一步，但如果我也能得到一些这方面的指导，将不胜感激。

衷心感谢任何帮助！

$(document).on('click', '#reply-toggle', function() {
    $(this).closest('.col-sm-offset-1').next('#reply-div').slideToggle('slow');
});

编辑：在 col-sm-offset-1 类中添加了一个句点

您的链接选择器与任何内容都不匹配。 $("#reply-toggle a") 将返回父项 ID 为 reply-toggle 的所有 <a> 标签。

您应该将其更改为简单的$("#reply-toggle") 。

编辑：顺便说一句，您说您有多个这些回复按钮 - 我强烈建议您将ID选择器更改为类选择器，因为浏览器期望每页只有一个具有特定ID的元素。

"#reply-toggle a"在

具有 id "reply-toggle" 的元素中查找<a>元素。也许$("a#reply-toggle")可以解决您的解雇问题？

您可能希望为每个回复切换和div 生成一个特定的 id，例如 reply-toggle-1 和 reply-div-1 。但是，此方法需要为每个开关定义一个click()。改用类声明（即不是id="reply-toggle"，而是class="reply-toggle"）。

相关文章：