0

リンクがクリックされたときに非表示のdivを表示するためにjqueryを少しいじっています。これはかなり単純なはずですが、この場合は欠陥があります。私は次のマークアップを持っています：

<div class="first-row">
        <div class="week">
            <p>Uge 2</p>
            <p>(08-01-11)</p>
        </div>
        <div class="destination">
            <p><a href="#">Les Menuires</a></p>
            <p>(Frankrig)</p>
        </div>
        <div class="days">4</div>
        <div class="transport">Bil</div>
        <div class="lift-card">3 dage</div>
        <div class="accommodation">
            <p><a class="show-info" href="#">Hotel Christelles (halvpension)</a></p>
            <p>4-pers. værelse m. bad/toilet</p>
        </div>
        <div class="order">
            <p><a href="#">2149,-</a></p>
            <p class="old-price">2249,-</p>
        </div>
        <div class="hotel-info">
         <!-- The div I want to display on click -->
        </div>
    </div>

「show-info」リンクをクリックすると、「hotel-info」divが表示されます。私のバックエンド開発者は私にIDを使用させたくありません（理由を聞かないでください..）。上記のマークアップはデータを表示するために何度も使用されます。したがって、リンクがクリックされた「first-row」divの「hotel-info」divにアクセスできる必要があります。

私は次のようなことをしようとしました：

$(document).ready(function() {
    $('.show-info').click(function() {
        var parentElement = $(this).parent().parent();
        var lastElementOfParent = parentElement.find(".show-hotel");
        lastElementOfParent.show();
    });
});

しかし、結果なしで：-/これはまったく可能ですか？

どんな助けでも大歓迎です！

よろしくお願いします！

4

2 に答える 2

2

これを試して：

$('.show-info').click(function() {
    $(this).closest('.accommodation').siblings('.hotel-info').show();
});

さらに良いimoは、リンクが行にある場所から独立しているため、すべての「行div」が同じクラスを持っている場合（最初のクラスだけがクラスを持っているとfirst-row思います）、次のことができます。

$(this).closest('.row-class').find('.hotel-info').show();

参照： .closest、.siblings

コードが機能しない理由の説明：

$(this).parent().parent();

divwithクラスを提供しますが、.accommodationこれにはwithクラスの子孫がありません.hotel-info。

とにかく、この種のトラバーサルを複数のレベルで使用することはお勧めできません。構造が少し変更されると、コードが壊れます。構造の変更で壊れない方法を常に使用するようにしてください。

于 2011-04-28T09:44:32.143 に答える
0

必要なDIVを見つけるためにID要素を使用しないのは正しいです:)

使用closestしてnextAll

ここでのライブデモ：http：//jsfiddle.net/jomanlk/xTWzn/

$('.show-info').click(function(){
    $(this).closest('.accommodation').nextAll('.hotel-info').toggle();
});
于 2011-04-28T09:48:35.893 に答える