jquery - トグルが正しく機能しない

Question

私は3つの同じdivを繰り返しており、クリックすると非表示のdivが表示され、1つのクラス.openPanelが正常に機能しているdivに追加されますが、別の2つのdivでも同じことが起こっています。これを一度に 1 つの div で機能させたいと考えています。

<div class="result">
    <div class="detailBg">
        <div class="detail">
            <div class="right">
                <h4 class="txttTransformNorml remmarginT addmarginB5 txt444">Deluxe Room</h4>
                <p><img src="images/star-5rated.png"></p>
                <p class="fnt-size12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="bookprice">
                <div class="col">
                    <div class="padding">
                        <p><span class="txtblue fnt-size20 font-opensansbd">$199</span><br>per room per night</p>
                        <p><a href="#" class="btn">Book Now</a></p>
                        <a href="#" id="viewDetail">+ View Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="viewDetails" id="detailPanel" style="display: none;">
        <ul>
            <li>Smoking Preferences: <span class="txt444">No</span></li>
            <li>Immediate Charge Required: <span class="txt444">True</span></li>
            <li>Guarantee Required: <span class="txt444">False</span></li>
        </ul>
        <p class="font-opensansbd txt000">Cancellation Policy :</p>
        <p>We understand that sometimes your travel plans change. We do not charge a change or cancel fee. However, this property (One & Only Royal Mirage ) imposes the following penalty to its customers that we are required to pass on: Cancellations or changes made after 11:59 PM ( on Oct 15, 2013 are subject to a 1 Night Room &amp; Tax penalty. The property makes no refunds for no shows or early checkouts.</p>
        <p class="font-opensansbd txt000">Note:</p>
        <ul class="remmarginB">
            <li>Number of children (1-3 per room)</li>
            <li>Number of children (1-3 per room)</li>
        </ul>
    </div>
</div>

<div class="result">
    <div class="detailBg">
        <div class="detail">
            <div class="right">
                <h4 class="txttTransformNorml remmarginT addmarginB5 txt444">Deluxe Room</h4>
                <p><img src="images/star-5rated.png"></p>
                <p class="fnt-size12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="bookprice">
                <div class="col">
                    <div class="padding">
                        <p><span class="txtblue fnt-size20 font-opensansbd">$199</span><br>per room per night</p>
                        <p><a href="#" class="btn">Book Now</a></p>
                        <a href="#" id="viewDetail">+ View Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="viewDetails" id="detailPanel" style="display: none;">
        <ul>
            <li>Smoking Preferences: <span class="txt444">No</span></li>
            <li>Immediate Charge Required: <span class="txt444">True</span></li>
            <li>Guarantee Required: <span class="txt444">False</span></li>
        </ul>
        <p class="font-opensansbd txt000">Cancellation Policy :</p>
        <p>We understand that sometimes your travel plans change. We do not charge a change or cancel fee. However, this property (One & Only Royal Mirage ) imposes the following penalty to its customers that we are required to pass on: Cancellations or changes made after 11:59 PM ( on Oct 15, 2013 are subject to a 1 Night Room &amp; Tax penalty. The property makes no refunds for no shows or early checkouts.</p>
        <p class="font-opensansbd txt000">Note:</p>
        <ul class="remmarginB">
            <li>Number of children (1-3 per room)</li>
            <li>Number of children (1-3 per room)</li>
        </ul>
    </div>
</div>

<div class="result">
    <div class="detailBg">
        <div class="detail">
            <div class="right">
                <h4 class="txttTransformNorml remmarginT addmarginB5 txt444">Deluxe Room</h4>
                <p><img src="images/star-5rated.png"></p>
                <p class="fnt-size12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="bookprice">
                <div class="col">
                    <div class="padding">
                        <p><span class="txtblue fnt-size20 font-opensansbd">$199</span><br>per room per night</p>
                        <p><a href="#" class="btn">Book Now</a></p>
                        <a href="#" id="viewDetail">+ View Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="viewDetails" id="detailPanel" style="display: none;">
        <ul>
            <li>Smoking Preferences: <span class="txt444">No</span></li>
            <li>Immediate Charge Required: <span class="txt444">True</span></li>
            <li>Guarantee Required: <span class="txt444">False</span></li>
        </ul>
        <p class="font-opensansbd txt000">Cancellation Policy :</p>
        <p>We understand that sometimes your travel plans change. We do not charge a change or cancel fee. However, this property (One & Only Royal Mirage ) imposes the following penalty to its customers that we are required to pass on: Cancellations or changes made after 11:59 PM ( on Oct 15, 2013 are subject to a 1 Night Room &amp; Tax penalty. The property makes no refunds for no shows or early checkouts.</p>
        <p class="font-opensansbd txt000">Note:</p>
        <ul class="remmarginB">
            <li>Number of children (1-3 per room)</li>
            <li>Number of children (1-3 per room)</li>
        </ul>
    </div>
</div>

<script>
    $('a#viewDetail').click(function (e) {
        $('#detailPanel').toggle();
        $('a#viewDetail').closest('.result').toggleClass('openPanel');
        return false;
    });
</script>

Answer 1

は、特定の HTML ドキュメントに対して一意であるID必要があります。複数の div に同じ ID を与えています。

<div class="viewDetails" id="detailPanel" style="display: none;">

したがって、このコードを実行すると:

$('#detailPanel').toggle();

コンテキストは関係ありません。理論的には、id の1 つのdetailPanel要素をターゲットにしています。jQuery は、クリックしたリンクに関係なく、最初のリンクを見つけて、オンまたはオフに切り替えます。

少なくともそれが起こるべきです: fiddleを参照してください。

.openPanelクラスが何をすべきかはわかりませんがclosest()、jQuery での使用方法を知っている場合は、そのアプローチを使用してtoggle()コードを置き換えることができます。