jquery - 回复帖子

Question

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

jQuery

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

CSS

.hidden{
  display: none;
}

只有第一个帖子有效。

Answer 1

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

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

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

如果没有 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 循环，并且可以将迭代索引插入到每个replyandbox元素中。如果您提供一些示例 HTML，则可以提供更好的解决方案。

---

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

Answer 2

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

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