[javascript]

[Verwijderd]

Ik zit met het volgende probleem. Ik ben bezig met een menu structuur waarbij een mouse over bepaalt welk blok verschijnt en welke er verdwijnen. Maar dit is met meer dan 20 blokken niet efficient. Mijn javascript actie ziet er als volgt uit:

JavaScript:

 

    $(".slide4").hover(function(){
        // first close any other open panels
        $("#panel1").hide();
        $("#panel2").hide();
        $("#panel3").hide();
        $("#panel5").hide();
        $("#panel6").hide();
        $("#panel7").hide();        
        // then open the selected panel
        $("#panel4").fadeIn("slow");
        $(this).toggleClass("active"); return false;
    });    
    
    $(".slide5").hover(function(){
        // first close any other open panels
        $("#panel1").hide();
        $("#panel2").hide();
        $("#panel3").hide();
        $("#panel4").hide();
        $("#panel6").hide();
        $("#panel7").hide();        
        // then open the selected panel
        $("#panel5").fadeIn("slow");
        $(this).toggleClass("active"); return false;
    }); 

Dus voor iedere:

JavaScript:

 
$(".slide5").hover(function()

Moet ik alle

JavaScript:

 
$("#panelXX").hide();

aanpassen. Hoe moet ik dit aanpakken zodat mijn code niet onoverzichtelijk lang word?
Ik weet dat het met een loop kan, maar mijn javascript kennis gaat niet verder.

[gorgi_19]

Voeg een class toe aan de panels en selecteer daarop.

[Joolee]

JavaScript:

$('#menu > .menuitem').hover(function() {
    $('#menu > .menuitem').hide();
    $(this).fadein('slow');
});

Geen werkende code maar slechts een ideetje.

[ Voor 12% gewijzigd door Joolee op 13-03-2011 19:46 ]

[Amras]

Of stop het open panel in een variabele, dan kan je expliciet die ene sluiten als een andere geopend moet worden.

[Verwijderd]

Hoe bedoel je? De panels staan al in de class button. Maar dit heeft niets te maken met het sluiten en openen van de slides. Volgens google moet ik een iterator gebruiken.

Dus om bijvoorbeeld panel 7 te laten zien en de rest te sluiten:

JavaScript:

 
for($i < $aantal_panels){
     if("#panel$i" != 7){
          $("#panel$i").hide();
     }else{
          $("#panel7").fadeIn("slow"); 
          $(this).toggleClass("active"); return false;
}

Kan iemand hier de javascript versie van laten zien?

[Manuel]

Je bedoelt iets als dit?

JavaScript:

for(var i = 0; i < aantal_panels.length; i++) {
    if(i != 7) {
        $("#panel" + i).hide();
    } else {
        $("#panel7").fadeIn("slow"); 
        $(this).toggleClass("active");
        break;                
    }
}

return false;

[Verwijderd]

JavaScript:

$(".allPanels").hide();
$("#panel7").unhide();
$("#panel7").fadeIn("slow"); 
$(this).toggleClass("active");

[ Voor 6% gewijzigd door Verwijderd op 13-03-2011 20:00 ]

[Amras]

Waarom niet zo?

JavaScript:

var openPanel;

$(".slide4").hover(function(){ 
        if (openPanel)
            openPanel.hide();
        
        openPanel = $("#panel4");
        openPanel.fadeIn("slow");
 
        $(this).toggleClass("active"); return false; 
    }); 

Of de oplossing die gorgi_19 al eerder aandraagt, dat werkt ook eenvoudig en zonder veel code.

[ Voor 14% gewijzigd door Amras op 13-03-2011 20:00 ]

[Verwijderd]

Amras schreef op zondag 13 maart 2011 @ 19:59:
Waarom niet zo?

JavaScript:

var openPanel;

$(".slide4").hover(function(){ 
        if (openPanel)
            openPanel.hide();
        
        openPanel = $("#panel4");
        openPanel.fadeIn("slow");
 
        $(this).toggleClass("active"); return false; 
    }); 

Of de oplossing die gorgi_19 al eerder aandraagt, dat werkt ook eenvoudig en zonder veel code.

Dit werkt top! Bedankt!

De code is nu vervangen door:

JavaScript:

var openPanel; 

$(".slide1").hover(function(){  
        if (openPanel) 
            openPanel.hide(); 
         
        openPanel = $("#panel1"); 
        openPanel.fadeIn("slow"); 

        $(this).toggleClass("active"); return false;  
    });

    
$(".slide2").hover(function(){  
        if (openPanel) 
            openPanel.hide(); 
         
        openPanel = $("#panel2"); 
        openPanel.fadeIn("slow"); 

        $(this).toggleClass("active"); return false;  
    });

[Amras]

Het is een begin, maar het kan nog een stuk korter. Bedenk eens of je het kunt oplossen met 1 functie die voor al je panels werkt.

[Creepy]

Kan je de volgede keer een completere titel geven? Alleen "javascript" zegt eigenlijk helemaal niks over je probleem. Javascript topics horen ook nog eens thuis in Webdesign, Markup & Clientside Scripting en niet in Programming zoas uitgelegd in Waar hoort mijn topic?. Ook ben je redelijk kort van stof in je topicstart omdat je niet aangeeft wat je zelf al hebt geprobeerd en wat daar niet mee lukte. Gezien je nu al een oplossing hebt sluit ik je topic en verplaats ik het niet. Wil je voor de volgende keer erop letten dat je wat meer informatie geeft en even kijkt of je we op de juiste plek zit? Nu lijkt het er een beetje op dat je gewoon zo snel mogelijk een kant en klaar werkende oplossing wilt hebben, maar dat is nu niet niet de bedoeing van het forum

[ Voor 17% gewijzigd door MueR op 14-03-2011 09:58 ]