Question

我正在尝试动态编写HTML代码，切换它所包含的div（post）的回复文本框。由于我使用PHP动态输出每个div（post）而不能成为负担将每个回复按钮与每个div唯一链接。

的jQuery

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

CSS

.hidden{
  display: none;
}

只有第一篇文章才有效。

Answer 1

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

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

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

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

JS Fiddle
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”）更好。

Answer 2

创建按钮时会显示id＆amp;每个按钮的类以这样的方式，当您单击时，您应该能够获得该ID。写一个函数：

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

回复帖子

2 个答案: