0

私はjQueryを使い始めたばかりで、実際にはいくつかの非常に基本的なものにのみ必要です。これが私がやろうとしていることです：

コンテンツを「.overview」divと「.detail」divに分けます。jQueryはすべての".detail"-divを調べ、1つの要素（.prev（ "。overview"））を上に移動して、ボタンを追加します。次に、すべての「.detail」divをゼロに縮小し、ボタンを使用してそれぞれを表示/非表示にします。

私は最初にボタンをハードコーディングしましたが、それは退屈で不必要に思えました。しかし、それらを動的に生成するとすぐに、表示/非表示機能は機能しなくなります。私は周りを検索しましたが、正しい用語を使用していない可能性があります...

これが私のhtmlです：

<div class="title">
    <h2>Title</h2>
</div>
<div class="overview">
    <p>...</p>
</div>
<div class="detail">
        <p>...</p>
</div>

そしてこれはjQueryコードです（別のファイルにあります）：

$(document).ready(function() {

    $(".detail").each(function() {
        $(this).prev("div").append("<div class=\"expand\"><a href=#>more</a></div>");
        $.data(this, "realHeight", $(this).height());
    }).css({ overflow: "hidden", height: "0" });

    $(".expand").toggle(function() {
        $(this).html("<a href=#>less</a>")
        var div = $(this).next(".detail")
        div.animate({ height: div.data("realHeight")+21 }, 250);        
    }, function() {
        $(this).html("<a href=#>more</a>")
        $(this).next(".detail").animate({ height: 0 }, 250);
    });

});

私を正しい方向に向けていただければ幸いです。または、それが愚かなものである場合は、検索を行うために必要なものを教えてください。:-)

ありがとう！

4

2 に答える 2

1

読む必要のあるテクニックはイベントの委任です。使用しているバージョンに応じて、jQueryの関数.on()と関数を確認してください。.delegate()

ただし、一般的な原則は、イベントハンドラーを個々の要素（jQueryコードの実行時に存在する必要がある）にバインドするのではなく、常に存在することがわかっている要素（<body>タグなど）に単一のイベントハンドラーをバインドすることです。セレクターに依存する関数を実行します。

ボタン要素をクリックすると、その要素に対してクリックイベントがトリガーされ、次にDOMがバブルアップされ、途中で遭遇するすべての要素に対してトリガーされます。常に存在する要素（<body>要素）に到達すると、イベントの元のターゲットを提供されたセレクターと照合し、一致する場合にのみコードを実行します。

于 2012-06-20T13:16:23.377 に答える
0

$ .next（）は次の兄弟を取得し、「。detail」はDOM構造内の「.expand」の兄弟ではありません。親（ ".overview"）にアクセスしてから、next（）を取得することをお勧めします。

または、兄弟になるように構造を変更します。

編集：あなたのコードであなたはこれをします、そしてそれが彼らが兄弟ではない理由です：

$(".detail").each(function() {
    $(this)
        .prev("div") // <- this gets the overview div
        .append("<div class=\"expand\"><a href=#>more</a></div>"); // <- this creates the "expand" as a child of the overview div (so not a sibling of details)

質問のベースコードを使用して、「親」が機能するこのフィドルを試してください。

これは、.を使用して兄弟として挿入されたdiv「expand」を含む別のフィドルinsertBeforeです。.parent()それはまったく同じように機能し、電話は必要ありません。

于 2012-06-20T13:20:54.810 に答える