jquery - 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;}

基本上我有和这里一样的问题

但我不能使用 .next(); 因为我的“按钮”后面有 div

Answer 1

ID 在文档中必须是唯一的，通常用于检索元素 usingdocument.getElementById或 by usingjQuery Selector

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

我已更改您的标记并将所有id替换为class

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> 

​</p>

jQuery：

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

在这里查看它是如何工作的

Answer 2

检查此演示

<!--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 的类）：

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

或者您想添加更多的孩子并为您可以使用的所有表单+选项设置一个 parent ()：

$(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