0

したがって、以下のコードは最初の要素「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があるからです

4

4 に答える 4

3

document.getElementByIdIDはドキュメント内で一意である必要があり、多くの場合、を使用して、またはを使用して要素を取得するために使用されます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>

</ p>

jQuery：

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

ここでどのように機能しているかを確認してください

于 2012-08-10T11:15:54.863 に答える
1

このデモをチェックしてください

<!--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;}
于 2012-08-10T11:24:04.420 に答える
0

IDは一意であり、2回割り当てることはできません（クラスを使用）。

于 2012-08-10T11:07:15.530 に答える
0

マークアップをクラスで修正する場合は、次のいずれかを使用できます（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

于 2012-08-11T12:44:14.843 に答える