2012-04-02 3 views
0

여기 내 코드입니다 :JQuery와 : 숨기기()와 쇼() 요소 부하를 생성 한 후()

여기
$(".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(); 
}); 

이 features.html 주요이지만 관련이없는입니다 :

<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> 

. expla .g1 ...., f1 ..., w1 ...은 features.html에있는 요소입니다. 하지만 hide() 메서드에 의해 숨겨지지 않습니다. 나중에 다른 코드 덕분에이 요소를 표시하도록 show() 메서드를 사용합니다.

로드() 결과가 DOM에 추가되지 않았기 때문에 문제가 발생한 것 같습니다. 그러나 나는 그것을 관리하는 방법을 모른다. 나는 jquery로 그렇게 좋지 않다.

도와 주시겠습니까?

읽어 주셔서 감사합니다.

편집 : 숨겨진 효과가 잘못되어 작업이 잘못되었습니다. 그로드 된 요소를 사용할 수없는 후하지만이이 작동하지 않습니다 예를 들어 의미 :

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; 
      } 

이 코드가 있기 때문에 제대로 작동 최적화 부족의 진짜 큰 혼란 또 다른 JS 파일에 있습니다,

$(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); 

     }; 


    }); 

답변

0

당신은 $("YourElement").css("opacity","0") 또는 $("YourElement").css("visibility","hidden") 또는 $("YourElement").css("display","none")

+0

아니 당신이 나 또한 내가 원한다면 내 나중에 코드에서 원인을 작동하려면 숨기기() 메소드가 필요합니다 :-) –

3

가 H에 display: none로 설정 설정하려고 할 수 있습니다 : 당신이 얼마나 복잡보고 싶다면 여기 전체 페이지입니다 TML을 사용하면 부하시에도 (간략하게) 표시되지 않습니다. 나중에 .show() 메쏘드는 그것들을 여전히 표시 할 것입니다.

+0

도움을 난 이미 덕분에이 솔루션을 ^^ 시도했다 작동하지 않습니다 그것들을 보여주세요. 나는 또한 그것을 사라지게하고 싶습니다. : p –

+0

그 시점에서 그들은 DOM에로드되어 액세스 가능할 것이기 때문입니다. 사용할 수 있기 전에 숨기려고합니다. – saluce

+0

게시물 수정, 다시 문제를 해결하려고하는 경우 내 문제가 변경되었습니다. ^^ –

1

코드에 몇 가지 문제가 있습니다.

먼저 구문이 잘못되었습니다 (간결하게하기 위해 일부 코드를 생략했기 때문에).

그렇다면 DOM을 만들 때 존재하지 않는 요소를 조작하려고합니다.

그런 다음 $.on() 방법을 사용하여 이벤트에 표시하도록 트리거 : 당신은 사용할 수 있습니다, 사전에 숨겨진 원하는 모든 요소를 ​​가져야한다.

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

답변을 주셔서 감사합니다. 자바 스크립트를 전혀 사용하지 않는 사용자에게 유용하기 때문에 표시 방법을 유지하고 있습니다. –

+0

포스트를 수정했습니다. 다시 문제를 해결하고 싶다면 내 문제가 변경되었습니다. ^^ –