2012-04-02 8 views
0

Hier ist mein Code:JQuery: ausblenden() und Show() Elemente nach ihnen mit Last zu erzeugen()

$(".feat").click(function() { 
    $('#content').empty(); 

    $('#content').load('loaded/features.html', function() { 
    $('.expla').hide(); 
    $('.g1,.g2,.g3,.g4,.g5,.g6').hide(); 
    $('.f1,.f2,.f3,.f4,.f5,.f6').hide(); 
    $('.w1,.w2,.w3,.w4,.w5,.w6').hide(); 
}); 

Hier features.html ist, aber es ist nicht relevant:

<div id="eruscont"> 
     <div id="erustyle">What I can do !</div> 
     <div id="undercore"> 
      <div id="grinder"> 
      <div class="title grinder plus"><p>Grinder&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="image/add.png" /></p></div> 
     </div> 
      <div id="flyer"> 
      <div class="title flyer plus"><p>Flyer &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="image/add.png" /></p></div> 
     </div> 
      <div id="whack"> 
      <div class="title whack plus"><p>WHack &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="image/add.png" /></p></div> 
     </div> 
     </div><!-- Fin undercore --> 
    </div><!-- Fin eruscont --> 
<div id="schema"><div id="mainstuff"><p>Browse my main options, and you'll see what I'm able to do for you !</div> 
    <div class="expla egrinder"> 
     <div class="explication g1">Define a path and kill mobs</div> 
     <div class="explication g2">Smart movement/path system</div> 
     <div class="explication g3">Loots, skins, gathers using ground mount</div> 
     <div class="explication g4">Sells, buys, repairs, mails stuff</div> 
     <div class="explication g5">Automatic spell casting highly customizable</div> 
     <div class="explication g6">Computer still available for use when running</div> 
    </div> 
    <div class="expla eflyer"> 
     <div class="explication f1">Define a path and gather resources</div> 
     <div class="explication f2">Kills, loots, skins, mines, Herbs</div> 
     <div class="explication f3">Uses flying mount and Swiming mount</div> 
     <div class="explication f4">Sells, buys, repairs, mails stuff</div> 
     <div class="explication f5">Analyzes your skill level and pick up what you can have</div> 
     <div class="explication f6">Computer still available for use when running</div> 
    </div> 
    <div class="expla ewhack"> 
<div class="explication w1">Use your character differently</div> 
<div class="explication w2">Fly hack, Water Walk, Wall walk</div> 
<div class="explication w3">Removes collision, AFK, falling and Lua protection</div> 
<div class="explication w4">Auto Loot, Auto kick, tracking and morpher</div> 
</div>   
</div> 

. Erklärung .g1 ...., f1 ..., w1 ... sind Elemente in features.html. Aber sie sind nicht versteckt durch die hide() Methode, außerdem später in meinem Code benutze ich show() Methode, um diese Elemente dank verschiedener Ereignisse erscheinen zu lassen.

Ich schätze das Problem liegt daran, dass das Ergebnis von load() nicht zum DOM hinzugefügt wird. Aber ich weiß nicht, wie ich es schaffen soll. Ich bin nicht so gut mit jQuery.

könnten Sie mir helfen?

Danke fürs Lesen!

EDIT: Ich lag falsch, der Versteckeffekt funktioniert, ich zielte nur auf die falschen Elemente. Aber danach geladene Elemente meine ich zum Beispiel nicht verwendbar sind dies nicht funktioniert:

if($('.expla.eflyer').is(':visible') || $('.expla.ewhack').is(':visible')) 
      { 
       $('.expla').hide(); 
       $('#mainstuff').hide(); 
       $('.flyer img').attr({src: "image/add.png" }); 
       $('.whack img').attr({src: "image/add.png" }); 
       $('.flyer','.whack').addClass('plus'); 
       $('.g1,.g2,.g3,.g4,.g5,.g6').hide(); 
       $('.w1,.w2,.w3,.w4,.w5,.w6').hide(); 
       $('.grinder').removeClass('plus'); 
       $('.f1,.f2,.f3,.f4,.f5,.f6').hide(); 
       $('.expla.egrinder').show("blind", { direction: "vertical" }, 3000,function() { callback("g")}); 
       $('.grinder img').attr({src: "image/minus.png" }); 
       return false; 
      } 

Dieser Code wird in einer anderen js Datei befindet, die aufgrund der fehlenden Optimierung ein echtes großes Durcheinander, aber die richtig funktionieren, hier ist die gesamte Seite, wenn Sie sehen möchten, wie kompliziert es ist:

$(document).ready(function() 
{ 
    $('.expla').hide(); 
    $('.g1,.g2,.g3,.g4,.g5,.g6').hide(); 
    $('.f1,.f2,.f3,.f4,.f5,.f6').hide(); 
    $('.w1,.w2,.w3,.w4,.w5,.w6').hide(); 

     // run the currently selected effect 

    $(".grinder img").click(function() { 
     if($('.grinder').hasClass('plus')) 
     { 
      if($('.expla.eflyer').is(':visible') || $('.expla.ewhack').is(':visible')) 
      { 
       $('.expla').hide(); 
       $('#mainstuff').hide(); 
       $('.flyer img').attr({src: "image/add.png" }); 
       $('.whack img').attr({src: "image/add.png" }); 
       $('.flyer','.whack').addClass('plus'); 
       $('.g1,.g2,.g3,.g4,.g5,.g6').hide(); 
       $('.w1,.w2,.w3,.w4,.w5,.w6').hide(); 
       $('.grinder').removeClass('plus'); 
       $('.f1,.f2,.f3,.f4,.f5,.f6').hide(); 
       $('.expla.egrinder').show("blind", { direction: "vertical" }, 3000,function() { callback("g")}); 
       $('.grinder img').attr({src: "image/minus.png" }); 
       return false; 
      } 
      else 
      { 
       $('#mainstuff').hide(); 
       $('.g1,.g2,.g3,.g4,.g5,.g6').hide(); 
       $('.grinder').removeClass('plus'); 
       $('.expla.egrinder').show("blind", { direction: "vertical" }, 3000,function() { callback("g")}); 
       $('.grinder img').attr({src: "image/minus.png" }); 
       return false; 
      } 
     } 
     else  
     { 
      $('.grinder img').attr({src: "image/add.png" }); 
      $('.g1,.g2,.g3,.g4,.g5,.g6').hide(); 
      $('.expla.egrinder').hide("explode", 1500); 
      $('.grinder').addClass('plus');  
      return false; 
     } 



    }); 

    $(".flyer img").click(function() { 
     if($('.flyer').hasClass('plus')) 
     { 
      if($('.expla.egrinder').is(':visible') || $('.expla.ewhack').is(':visible')) 
      { 
       $('.expla').hide(); 
       $('#mainstuff').hide(); 
       $('.grinder img').attr({src: "image/add.png" }); 
       $('.whack img').attr({src: "image/add.png" }); 
       $('.grinder','.whack').addClass('plus'); 
       $('.g1,.g2,.g3,.g4,.g5,.g6').hide(); 
       $('.w1,.w2,.w3,.w4,.w5,.w6').hide(); 
       $('.flyer').removeClass('plus'); 
       $('.f1,.f2,.f3,.f4,.f5,.f6').hide(); 
       $('.expla.eflyer').show("blind", { direction: "vertical" }, 3000,function() { callback("f")}); 
       $('.flyer img').attr({src: "image/minus.png" }); 
       return false; 
      } 
      else 
      { 
       $('#mainstuff').hide(); 
       $('.f1,.f2,.f3,.f4,.f5,.f6').hide(); 
       $('.flyer').removeClass('plus'); 
       $('.expla.eflyer').show("blind", { direction: "vertical" }, 3000,function() { callback("f")}); 
       $('.flyer img').attr({src: "image/minus.png" }); 
       return false; 
      } 
     } 
     else  
     { 
      $('.flyer img').attr({src: "image/add.png" }); 
      $('.expla.eflyer').hide("explode", 1500); 
      $('.f1,.f2,.f3,.f4,.f5,.f6').hide(); 
      $('.flyer').addClass('plus'); 
      return false; 
     } 
    }); 

    $(".whack img").click(function() { 
     if($('.whack').hasClass('plus')) 
     { 
      if($('.expla.egrinder').is(':visible') || $('.expla.eflyer').is(':visible')) 
      { 
       $('.expla').hide(); 
       $('#mainstuff').hide(); 
       $('.grinder img').attr({src: "image/add.png" }); 
       $('.flyer img').attr({src: "image/add.png" }); 
       $('.grinder','.flyer').addClass('plus'); 
       $('.g1,.g2,.g3,.g4,.g5,.g6').hide(); 
       $('.w1,.w2,.w3,.w4').hide(); 
       $('.whack').removeClass('plus'); 
       $('.f1,.f2,.f3,.f4,.f5,.f6').hide(); 
       $('.expla.ewhack').show("blind", { direction: "vertical" }, 3000,function() { callback("w")}); 
       $('.whack img').attr({src: "image/minus.png" }); 
       return false; 
      } 
      else 
      { 
       $('#mainstuff').hide(); 
       $('.w1,.w2,.w3,.w4').hide(); 
       $('.whack').removeClass('plus'); 
       $('.expla.ewhack').show("blind", { direction: "vertical" }, 3000,function() { callback("w")}); 
       $('.whack img').attr({src: "image/minus.png" }); 
       return false; 
      } 
     } 
     else  
     { 
      $('.whack img').attr({src: "image/add.png" }); 
      $('.expla.ewhack').hide("explode", 1500); 
      $('.w1,.w2,.w3,.w4').hide(); 
      $('.whack').addClass('plus'); 
      return false; 
     } 
    }); 


    // Grinder callbacks 
    // Flyer callbacks 
    //WHack callbacks  

     function callback(xlol) { 
      var pif = "."+xlol+"1"; 
      var arg = xlol; 
      $(pif).show("slide", 200, function() { call2(arg)}); 
     }; 

     function call2(xlol) { 
      var pif = "."+xlol+"2"; 
      var arg = xlol; 
      $(pif).show("slide", 200,function() { call3(arg)});  
     };  

     function call3(xlol) { 
      var pif = "."+xlol+"3"; 
      var arg = xlol; 
      $(pif).show("slide", 200,function() { call4(arg)});  

     };  
     function call4(xlol) { 
      var pif = "."+xlol+"4"; 
      var arg = xlol; 
      $(pif).show("slide", 200,function() { call5(arg)});  

     };  
     function call5(xlol) { 
      var pif = "."+xlol+"5"; 
      var arg = xlol; 
      $(pif).show("slide", 200,function() { call6(arg)});  

     };  
     function call6(xlol) { 
      var pif = "."+xlol+"6"; 
      $(pif).show("slide", 200); 

     }; 


    }); 

Antwort

0

können Sie versuchen, $("YourElement").css("opacity","0") oder $("YourElement").css("visibility","hidden") oder $("YourElement").css("display","none")

+0

Nein, es funktioniert nicht, hatte ich versucht, diese Lösung bereits ^^ Dank für Sie :-) –

3

Stellen Sie sie als display: none in der H gesetzt TML, und sie werden nicht angezeigt (auch nicht kurz) auf Last. Später werden .show() Methoden immer noch angezeigt.

+0

helfen ich brauche auch die Haut Methoden() Ursache zu arbeiten, wenn ich will zeige sie, ich möchte sie auch auf onclick verschwinden lassen: p –

+0

Sie werden ... weil zu diesem Zeitpunkt werden sie in das DOM geladen und zugänglich sein. Sie versuchen, sie zu verbergen, bevor sie verfügbar sind. – saluce

+0

Beitrag bearbeitet, mein Problem hat sich geändert, wenn Sie es wieder versuchen wollen ^^ –

1

Einige Probleme mit Ihrem Code.

Zunächst ist Ihre Syntax gebrochen (ich nehme an, weil Sie aus Gründen der Kürze etwas Code ausschneiden).

Abgesehen davon versuchen Sie Elemente zu manipulieren, die nicht vorhanden sind, wenn das DOM erstellt wird. Sie sollten alle Elemente haben Sie vorher versteckt werden sollen, könnten Sie verwenden:

Dann auslösen sie auf ein Ereignis zu zeigen, die $.on() Methode. später in meinem Code

$(document).on('click', 'someSelector', function() {   
    $('.someOtherSelector').show(); 
}); 
+0

Hallo danke für Ihre Antworten, gibt es eine Möglichkeit, es angezeigt zu halten, weil ich will, dass es für Benutzer funktioniert, die überhaupt kein Javascript verwenden. –

+0

Beitrag bearbeitet, mein Problem hat sich geändert wenn du es nochmal lösen willst ^^ –