Obecnie pracuję nad budowaniem małego menu, który zmieni divs na podstawie której kliknął. Więc jeśli ktoś zostanie kliknięty, pokaże div powiązane z nim i ukryć innych, ECT. Ale nie mogę go pracować, ani nie mogę zrozumieć dlaczego. Wszelka pomoc byłaby doceniona. Dzięki.

Poniżej znajduje się mój kod. Przycisnęłem treść, ponieważ było jej wiele.

<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>
0
akari 21 sierpień 2012, 01:41

5 odpowiedzi

Najlepsza odpowiedź

Musisz umieścić skrypt pod marką. Albo to, albo umieść go wewnątrz Document.Ready Callback:

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

Problem polega na tym, że gdy skrypt pojawi się powyżej znacznika, zostanie wykonany przed załadowaniem HTML, a więc przeglądarka jeszcze nie wie o Raid-Progress-MOP itd.

2
McGarnagle 20 sierpień 2012, 21:43

Owiń swój kod w:

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

... co jest krótką formą:

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

Twoje zdrowie

4
Madbreaks 20 sierpień 2012, 21:43

Co powiesz na to trochę bardziej dynamicznie wewnątrz funkcji 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>
2
adeneo 20 sierpień 2012, 21:55

Jsbin Demo

Owiń swój kod w gotową funkcję, a ten kod, który napisałem, to wszystko, czego potrzebujesz:

$(function(){

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

});

Wyjaśnienie:

$('span[class$="Header"]') = docelowy element span, który klasy kończy się Header
Teraz po prostu załóż kliknij przycisk obsługi do wszystkich, którzy obejmują.
Niż, aby ukryć wszystkie elementy {x3}} do:
$('div[id^="raid-progress-"]').hide(); = ukryje się div, który id zaczyna się od raid-progress-
I musisz po prostu kierować div, który zawiera magiczne słowo: $('#raid-progress-'+classNameSpecific).show();

2
Community 20 czerwiec 2020, 09:12

$ ('. Mopheader') nie jest jeszcze zdefiniowany. Owiń swój skrypt za pomocą $ (funkcja () {...})

0
Shanimal 20 sierpień 2012, 21:44