如何在评论 div 下打开回复表单 [关闭]

Posted 2023-02-21

【中文标题】如何在评论 div 下打开回复表单 [关闭]

【英文标题】：how to open reply form under comments div [closed]

【发布时间】：2012-10-02 07:06:31

【问题描述】：

我有像 cmets 这样的 div

<div>
  <div>
    Some message over here
   </div>
   <div style = "height:10px;"> <a id = "post_id_1" class = "showReply" href = "javascript: void(0)">Reply</a></div>                                        
</div>

我的回复框

<div id="replymsgbox" style="display: none;">
    <form id="frmComment" novalidate="novalidate" method="POST" name="frmComment">
        <div>
            <textarea id="comment_text" class="" name="comment[text]"></textarea>
            <div id="error_text"> </div>
        </div>
        <div>      
            <input type="submit" value="Post" name="Submit">
        </div>
    </form>
</div>    

我的 Jquery：

//showCommentBox

$('a.showReply').live("click", function(e) 

$('#replymsgbox', $(this).parent().next()).slideToggle('fast')

);    

谁能帮帮我。我无法打开回复 div 或表单。我在哪里做错了

【问题讨论】：

$('#replymsgbox').slideToggle('fast');

.live 已弃用，请考虑将其更改为 .on - 顺便说一句，这不是您的问题，只是一个建议。

【参考方案1】：

EXAMPLE

$('a.showReply').on("click", function(e) 
   $('#replymsgbox').slideToggle('fast')   
);

您还需要在两个divs 之间添加一些填充或空格，以确保内容不会重叠。在示例中，我刚刚添加了一个<br/>。

请注意从 .live 到 .on 的更改，因为它现在已被弃用。

见Here:

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 来 附加事件处理程序。

​通过将您的 jQuery 代码放在$(document).ready(function ... ) 中，确保文档也准备就绪。我敢肯定，您可能已经这样做了，并且只是粘贴了相关代码，但确保总是好的。

【讨论】：

您好大通，感谢您的宝贵回复。 $('#replymsgbox').slideToggle('fast') 这会起作用，但在我的场景中，我有多个 cmets 列表，我需要在父评论下方或旁边打开回复框/表单，所以我正在尝试$('#replymsgbox', $(this).parent().next()).slideToggle('fast') 但没有取得任何成功。请您建议我如何实现这一目标。

@user1738385，我肯定会的。给我一点，我会创建另一个例子。

试试看这个例子：jsfiddle.net/xP89Z/2... 你会注意到我复制了现有的 html 3 次，我不推荐这样做（id 必须是唯一的），但是对于向您展示其工作原理的目的就足够了。接下来是我添加了 css 而不是 <br> 标签。最后是$(this).parent("div").parent("div").next("div").slideToggle();，它遍历DOM 树以获取回复链接的第二代父级。然后它获取下一个 div，在您当前的结构中，它始终是 replymsgbox。

【参考方案2】：

$("a.showReply").on("click", function()

    $(this).parent().parent().next().slideToggle("slow");

);  

这里是测试：http://jsfiddle.net/2HczB/

我与 next() 一起使用，因为我在您的代码中看到您尝试使用这种方式。最好立即调用 div 的 id。但是，使用我的解决方案，您可以在单击回复的消息后准确打开回复。

【参考方案3】：

$(function()    // if javascript code is before html
   $('a.showReply').click(function(e) 
       $('#replymsgbox').slideToggle('fast')
   ); 
);

​ http://jsfiddle.net/gxLdd/

【讨论】：

您好 RS，感谢您的宝贵回复。 $('#replymsgbox').slideToggle('fast') 这会起作用，但在我的场景中，我有多个 cmets 列表，我需要在父评论下方或旁边打开回复框/表单，所以我正在尝试$('#replymsgbox', $(this).parent().next()).slideToggle('fast') 但没有成功。请您建议我如何实现这一目标。

更新上面的代码以包含多个 cmets 列表，以便我可以更好地帮助您

【参考方案4】：

在最新版本的 jQuery 中使用以下内容。

$('a.showReply').on("click", function(e) 

   $('#replymsgbox').slideToggle('fast')

);    

【讨论】：

开发者您好，感谢您的宝贵回复。 $('#replymsgbox').slideToggle('fast') 这会起作用，但在我的场景中，我有多个 cmets 列表，我需要在父评论下方或旁边打开回复框/表单，所以我正在尝试$('#replymsgbox', $(this).parent().next()).slideToggle('fast') 但没有取得任何成功。请您建议我如何实现这一目标。

首先，您不应该在同一页面上使用多个 ID。要解决您的问题，请创建一个小提琴来帮助我理解问题。