0

ここにHTMLがあります

<div id="projectheader">
Project 1
<span id="plus">+</span></div>
<div class="projectdrop">
<div id="orderheader"><span id="plus">+</span></div>
<div class="orderdrop"></div>
</div>

<div id="projectheader" style="margin-top: 20px;">
Project2
<span id="plus">+</span></div>
<div class="projectdrop">
<div id="orderheader"><span id="plus">+</span></div>
<div class="orderdrop"></div>

</div>

プロジェクトがバックエンドで動的に作成され、情報がフロントエンドのプロジェクトヘッダーに挿入されるサイトで作業しています。そのため、同じページに projectheader の ID を持つ多数の div が存在する可能性があります。私がやろうとしているのは、+ div をクリックして projectdrop を下にスライドすることです。これは、ページにプロジェクトが 1 つしかない場合は問題ありませんが、ページに複数のプロジェクト ヘッダーがある場合は機能しません。クリックした特定のプロジェクト ヘッダーのみをスライドダウンできるようにしたいと考えています。

前もって感謝します。

4

2 に答える 2

2

まず、IDの重複の問題を修正することを強くお勧めします。これは、悪い習慣であるだけでなく、このような問題を引き起こすためです。projectheader（および他のほとんどの「ID」）は、IDではなくクラスとして使用する方が適切である ように思われます。

ただし、機能するソリューションが必要な場合は、これでうまくいくと思います。

$('.plus').click(function(){
    $(this).parent().next('.projectdrop').slideDown();
}

これらのスパンを変更して、idplusではなくclassplusを使用してください。1つのIDを使用して複数のものを選択する ことはできません。

また、DOM要素間の関係を形成するためにDOM要素の順序を使用する必要があることは、悪い習慣と見なされる可能性があることにも注意してください。関連する要素をまたは他の適切な要素でラップすることをお勧めしますdiv。この要素には、IDまたは他の識別プロパティが付加されています。例えば：

<div class="project" id="project1">
    <header>
        Project 1
        <span class="plus">+</span>
    </header>
    <div class="drop">
        <div class="order">
            <header>
                <span class="plus">+</span>
            </header>
            <div class="drop">
            </div>
        </div>
    </div>
</div>
于 2012-11-03T15:33:26.413 に答える
1

理解した。

$(document).ready (function() {
$('.plus').on('click', function() {
 $(this).parent().next('.projectdrop').slideToggle('slow');

別の質問です。projectdrop が開いているときに + div を - に置き換えるにはどうすればよいですか?

ありがとう

于 2012-11-03T16:45:57.447 に答える