jQuery允许只切换一个元素

Question

因此，下面的代码仅适用于第一个元素'GALLERYTITLE'，

$(function(){$("#diradd").click(function(event)
{event.preventDefault();$("#diraddform").slideToggle();});});

HTML：

<!--stuff before-->

<div class="gallerytitle"

<a href="#"class="options" id="diradd" >Add new sub-gallery</a> <!--"button"-->

<!--another stuff divs, buttons etc.-->

<div id="diraddform">

<!--things in this div-->
</div></div> <!--the end of #1 gallerytitle div-->

<div class="gallerytitle"

<a href="#"class="options" id="diradd" >Add new sub-gallery</a> <!--"button"-->

<!--another stuff divs, buttons etc.-->

<div id="diraddform">

<!--things in this div-->

</div>

</div> <!--the end of #2 gallerytitle div-->

的CSS：

diraddform{
display:none;}

basically i have the same probleme like here

但我不能使用.next（）;因为我的“按钮”后面有divs

Answer 1

ID必须在文档中是唯一的，并且通常用于使用document.getElementById或使用jQuery Selector

检索元素

您必须将所有同名的 ID 替换为类

我已更改您的标记，并将所有 ID 替换为类

HTML：

<div class="gallerytitle">
    <a href="#" class="options diradd">Add new sub-gallery</a> 
    <!--"button"-->

    <!--another stuff divs, buttons etc.-->
    <div class="diraddform">
        test1
        <!--things in this div-->
    </div>
</div> 
<!--the end of #1 gallerytitle div-->

<div class="gallerytitle">
    <a href="#" class="options diradd" >Add new sub-gallery</a> 
    <!--"button"-->

    <!--another stuff divs, buttons etc.-->
    <div class="diraddform">
        test 2
        <!--things in this div-->
    </div>
</div> 

jQuery的：

$(function(){
    $(".diradd").click(function(event) {
        event.preventDefault();
        $(this).next('.diraddform').slideToggle();
    });
});​

SEE HOW IT IS WORKING HERE

Answer 2

选中此DEMO

<!--stuff before-->

<div class="gallerytitle">

<a href="#" class="options diradd" >
  Add new sub-gallery
</a>
  <div></div>
<!--"button"-->

  <div>Extra Buttons & Elements</div>

<div class="diraddform">
  zxcczc
</div>
</div>

<!--the end of #1 gallerytitle div-->

<div class="gallerytitle">

  <a href="#" class="options diradd">
    Add new sub-gallery 
  </a>

  <!--"button"-->

  <div>Extra Buttons & Elements</div>

  <div class="diraddform">

    zxczczczc

  </div>

</div>

<!--the end of #2 gallerytitle div-->

JS

$(function() {
    $(".options").click(function(event) {
        event.preventDefault();
        $(this).closest(".gallerytitle").find('.diraddform').slideToggle(1000);
    });
});

CSS

.diraddform{
display:none;}

Answer 3

ID是唯一的，您不能将其分配两次（使用类）。

Answer 4

如果您使用可以使用的类修复标记（基于您使用div的div类）：

$(function(){
    $(".options").click(function(event) {
        event.preventDefault();
        $(this).parent().find('.diraddform').slideToggle();
    });
});​

或者您想要添加更多孩子，并为您可以使用的所有表单+选项设置父级closest()：

$(function(){
    $(".options").click(function(event) {
        event.preventDefault();
        $(this).closest('.gallerytitle').find('.diraddform').slideToggle();
    });
});

演示：http://jsbin.com/ivegat/1/edit或最接近：http://jsbin.com/ivegat/4/edit