0

現在、クリックしたものに基づいて div を変更する小さなメニューの作成に取り組んでいます。したがって、1 つをクリックすると、それに関連付けられた div が表示され、他のものは非表示になります。しかし、私はそれを機能させることも、理由を理解することもできません。どんな助けでも大歓迎です。ありがとう。

以下は私のコードです。内容が多かったので抜粋しました。

<script type="text/javascript">
$('.mopHeader').click(function() {
    $('#raid-progress-mop').show();
    $('#raid-progress-cata').hide();
    $('#raid-progress-wotlk').hide();
    $('#raid-progress-tbc').hide();
    $('#raid-progress-vanilla').hide();
});

$('.cataHeader').click(function() {
    $('#raid-progress-mop').hide();
    $('#raid-progress-cata').show();
    $('#raid-progress-wotlk').hide();
    $('#raid-progress-tbc').hide();
    $('#raid-progress-vanilla').hide();
});

$('.wotlkHeader').click(function() {
    $('#raid-progress-mop').hide();
    $('#raid-progress-cata').hide();
    $('#raid-progress-wotlk').show();
    $('#raid-progress-tbc').hide();
    $('#raid-progress-vanilla').hide();
});

$('.tbcHeader').click(function() {
    $('#raid-progress-mop').hide();
    $('#raid-progress-cata').hide();
    $('#raid-progress-wotlk').hide();
    $('#raid-progress-tbc').show();
    $('#raid-progress-vanilla').hide();
});

$('.vanillaHeader').click(function() {
    $('#raid-progress-mop').hide();
    $('#raid-progress-cata').hide();
    $('#raid-progress-wotlk').hide();
    $('#raid-progress-tbc').hide();
    $('#raid-progress-vanilla').show();
});
</script>

<span class="h4">Raid Progress &nbsp; <span class="mopHeader">MoP</span> &nbsp; <span class="cataHeader">Cata</span> &nbsp; <span class="wotlkHeader">WotLK</span> &nbsp; <span class="tbcHeader">TBC</span> &nbsp; <span class="vanillaHeader">WoW</span></span> 


<div id="raid-progress-mop">
    <ul id="raid-mop">
        <li>Content A</li>
    </ul>
</div>

<div id="raid-progress-cata">
    <ul id="raid-cata">
        <li>Content B</li>
    </ul>
</div>

<div id="raid-progress-wotlk">
    <ul id="raid-wotlk">
        <li>Content C</li>
    </ul>
</div>

<div id="raid-progress-tbc">
    <ul id="raid-tbc">
        <li>Content D</li>
    </ul>
</div>

<div id="raid-progress-vanilla">
    <ul id="raid-vanilla">
        <li>Content E</li>
    </ul>
</div>
4

5 に答える 5

4

コードを次のようにラップします。

$(function(){ ... });

...これは次の短縮形です。

$(document).ready(function(){ ... });

乾杯

于 2012-08-20T21:43:35.963 に答える
2

ready()関数内でもう少し動的にそれを行うのはどうですか？

<script type="text/javascript"> 
    $(function() {
        $('[class$="Header"]').on('click', function() {
            var myClass = $(this).attr('class').replace('Header', '');
            $('[id^="raid-progress"]').hide();
            $('#raid-progress-' + myClass).show();
        });
    });
</script>
于 2012-08-20T21:55:40.690 に答える
2

jsBin デモ

あなたのコードを準備ができた機能にラップしてください。私が書いたこのコードはあなたが必要とするすべてです:

$(function(){

  $('span[class$="Header"]').click(function(){
     var classNameSpecific = $(this).attr('class').split('Header')[0];
     $('div[id^="raid-progress-"]').hide();
     $('#raid-progress-'+classNameSpecific).show();     
  });

});

説明：

$('span[class$="Header"]')= で終わるspanクラスの任意の要素をターゲット にします。すべてのスパンにクリック ハンドラを追加するだけです。 それよりも、すべての要素を非表示にするには、次のようにします: =で始まるものをすべて非表示にし、魔法の単語を含む をターゲットにするだけで済みます。 Header

div
$('div[id^="raid-progress-"]').hide();divid raid-progress-
div$('#raid-progress-'+classNameSpecific).show();

于 2012-08-20T21:51:56.580 に答える
2

マークアップの下にスクリプトを配置する必要があります。それか、document.readyコールバックの中に入れてください:

$(document).ready(function() {
    // code here
});

問題は、スクリプトがマークアップの上に表示されると、HTML が読み込まれる前にスクリプトが実行されるため、ブラウザーはまだraid-progress-mopなどを認識していないことです。

于 2012-08-20T21:43:17.677 に答える
0

$('.mopHeader') はまだ定義されていません。スクリプトを $(function(){...}) でラップします

于 2012-08-20T21:44:26.460 に答える