1

次のようなマークアップがあります ( http://jsfiddle.net/nick_craver/srg6g/から変更されたコード):

<div id="maps">
    <div class="map-box"><h2>London &amp; South East</h2><a href="#london"><img src="http://dummyimage.com/100x100/000/fff&text=London" /></a></div>
    <div class="map-box"><h2>South West, Ireland and Wales</h2><a href="#south-west"><img src="http://dummyimage.com/100x100/000/fff&text=South+West" /></a></div>    
    <div class="map-box"><h2>South Central &amp; Home Counties</h2><a href="#south-central"><img src="http://dummyimage.com/100x100/000/fff&text=South+Central" /></a></div>
    <div class="map-box"><h2>North England, Northern Ireland &amp; Scotland</h2><a href="#north"><img src="http://dummyimage.com/100x100/000/fff&text=North" /></a></div>
    <div class="map-box"><h2>Midlands</h2><a href="#midlands"><img src="http://dummyimage.com/100x100/000/fff&text=Midlands" /></a></div>
</div>
<br /><br/>
<div id="areas">
    <div id="london">
        <div>content london 1</div>
        <div>content london 2</div>
    </div>
    <div id="south-west">
        <div>content south west 1</div>
        <div>content south west 2</div>
    </div>
    <div id="south-central">
        <div>content south central 1</div>
        <div>content south central 2</div>
    </div>
    <div id="north">
        <div>content north 1</div>
        <div>content north 2</div>
    </div>
    <div id="midlands">
        <div>content midlands 1</div>
        <div>content midlands 2</div>
    </div>
</div>

私の JavaScript コードは次のようになります。

$(".map-box a").click(function(e) {
    $("#areas div").hide();
    $(this.hash).show();
    e.preventDefault();
});
$("#areas div").not("#london, #london div").hide();

ユーザーが画像をクリックすると、現在表示されているものを非表示にし、その画像に関連付けられている両方のコンテンツを表示したいのですが、これは機能しません。

例えば、

  • ユーザーが「南西」をクリック
  • 「コンテンツ南西1」と「コンテンツ南西2」の両方を表示

私が間違っていることを誰かに教えてもらえますか？

4

1 に答える 1

2

問題は、次の行のセレクターです。

$("#areas div").hide();

これは、「#areas」div の子孫であるすべての div 要素を選択して非表示にします。これには、「london」などの ID を持つ div だけでなく、それらの div の子も含まれます。その後、「london」のような id に基づいて div を表示すると、実際のコンテンツを含む子 div は非表示のままになります。

代わりにこれを試してください：

$("#areas > div").hide();

同様に、最初にそれらを非表示にする行についても:

$("#areas > div").not("#london, #london div").hide();​

これにより、「#areas」の直接の子である div のみが非表示になります。それらが非表示になっている間、その子も非表示になりますが、1 つを表示すると、その子も自動的に表示されます。

デモ: http://jsfiddle.net/7s5nP/

于 2012-04-23T10:44:08.247 に答える