回复帖子[关闭]答案

【问题标题】：Replying to a post [closed]回复帖子[关闭]
【发布时间】：2016-09-22 23:48:51
【问题描述】：

我正在尝试动态编写 HTML 代码来切换它所包含的 div（帖子）的回复文本框。这已成为一种负担，因为我使用 PHP 来动态输出每个 div（帖子）并且不能将每个回复按钮与每个 div 唯一链接。

jQuery

$("#reply").click(function(){
  $("#box").toggleClass("hidden");
});

CSS

.hidden{
  display: none;
}

只有第一个帖子有效。

【问题讨论】：

您声明only the box is visible on the very first post。应该有多少个盒子是可见的？您正在使用id 选择器$("#box")，因此它应该只使带有id="box" 的1 框可见。
好吧，如果你使用 ID，那么你的目标就是特定的元素。你要么需要类，要么给不同的元素提供相同的 ID，这是错误的
你不能有一个功能可以打开一个特定的 ID 框并认为它会附加到所有框

标签： jquery html css

【解决方案1】：

首先，如果您对每个div 都有一个回复按钮，那么您真的应该使用类。

id 应该对每个页面都是唯一的，另一方面，类被设计为具有多个实例。

所以发生的是你的 jQuery 选择器，$("#reply") 正在找到第一个 #reply 并停在那里。你的$("#box") 选择器也是如此。切换你的#replys 和#boxes 来上课，例如。 <div class="reply">，然后使用选择器$(".reply")。您的#boxes 也会遇到同样的问题。

如果没有 HTML 示例，我真的无法建议您在这里做的最好的事情。但这是一个通用的解决方案：

JS 小提琴
http://jsfiddle.net/Nveea/

HTML

<div id="reply-1" class="reply">Reply</div>`
<div id="box-1" class="box">box 1</div>
<hr />
<div id="reply-2" class="reply">Reply</div>
<div id="box-2" class="box">box 2</div>

CSS

.box
{
    display:none;
}

JavaScript

$(".reply").click(function(){
    //get the associated box
    var index = $(this).attr("id").replace("reply-","");

    //toggles show and hide
    $("#box-" + index).toggle(); 
});

上述解决方案假设您在 PHP 中使用某种 for 循环，并且可以将迭代索引插入到每个 reply 和 box 元素中。如果您提供一些示例 HTML，则可以提供更好的解决方案。

我还建议使用 jQuery 函数 toggle()，它可以在 display:hidden/block 之间切换元素/元素。在您的情况下，这可能比 .toggleClass("hidden") 更好。

【讨论】：

非常感谢，非常感谢
@Mr.DeveloperWaseem 没问题！如果这对您有帮助，请投票并考虑将其标记为答案。
进一步改进了我的答案，它最终仍然是相同的，但包含来自 JSFiddle 的代码 sn-ps。

【解决方案2】：

在创建按钮时，为每个按钮提供 id 和一个类，这样当您单击时，您应该能够获得该 ID。写一个函数：

$(".class").live("click",function(){
   var id=$(this).attr('id');
   $(id).insertAfter($("#box").show()); 
});

【讨论】：