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

时间:2014-12-31 10:17:58

标签: javascript jquery html

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

我发帖是因为我无法获得回复切换。

这是我的HTML:

 <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(最接近)才能切换与正确相关的回复框评论线程。我还没有完成这一步,但我将非常感激如果我能得到一些关于这方面的指导。

真诚地感谢您的帮助!

3 个答案:

答案 0 :(得分:1)

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

编辑:在col-sm-offset-1类

中添加了一个句点

答案 1 :(得分:0)

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

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

编辑:顺便说一下,你说你有多个这些回复按钮 - 我强烈建议你将ID选择器更改为类选择器,因为浏览器只希望每页有一个特定ID的元素。

答案 2 :(得分:0)

"#reply-toggle a"在ID为&#34; reply-toggle&#34;的元素中查找<a>个元素。也许$("a#reply-toggle")会解决您的解雇问题?

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