Odd Javascript Fehler (mit jQuery)

Question

Ich habe einen Code, der die Schaltflächen klickt und dann verschwindet der eigentliche Inhalt und macht den Inhalt des angeklickt Element angezeigt. Ich habe es zusammen mit anderen thins in einer Init.js Datei ausgeführt wird, die ich habe, ist:.

$(function() { 
    $('#contacto').fancybox({ 
     'hideOnContentClick': false, 
     'frameWidth': 600, 
     'frameHeight': 550, 
     'centerOnScroll': true 
    }); 


     $('ul.drawers').accordion({ 
      header: 'H2.drawer-handle', 
      selectedClass: 'open', 
      event: 'mouseover' 
     }); 

     $("#about-button").css({ opacity: 0.3 }); 
     $("#contact-button").css({ opacity: 0.3 }); 
     $("#page-wrap div.button").click(function(){ 
      clicked = $(this); 
      console.log(clicked); 
      // if the button is not already "transformed" AND is not animated 
      if ((clicked.css("opacity") != "1") && (clicked.is(":not(animated)"))) { 
       clicked.animate({ 
        opacity: 1, 
        borderWidth: 5 
       }, 600); 
       // each button div MUST have a "xx-button" and the target div must have an id "xx" 
       var idToLoad = clicked.attr("id").split('-'); 
       //we search trough the content for the visible div and we fade it out 
       $("#menu-content").find("div:visible").fadeOut("fast", function(){ 
        //once the fade out is completed, we start to fade in the right div 
        $(this).parent().find("#"+idToLoad[0]).fadeIn(); 
       }) 
      } 
      //we reset the other buttons to default style 
      clicked.siblings(".button").animate({ 
       opacity: 0.5, 
       borderWidth: 1 
      }, 600); 
     }); 
    }); 

aber nur das zweite $ (function() ist derjenige, der während dieses Ereignisses führt den HTML-Code, die Antworten auf das ist:

<div id="page-wrap"> 
      <div id="festival-button" class="button"> 
       <h2 class="header-ultimo-festival">&Uacute;timo Festival</h2> 
      </div> 
      <div id="cursos-button" class="button"> 
       <h2 class="header-cursos">Cursos del A&ntilde;o</h2> 
      </div> 
      <div id="viajes-button" class="button"> 
       <h2 class="header-viajes">Viajes del A&ntilde;o</h2> 
      </div> 

      <div class="clear"></div> 

      <div id="menu-content"> 
       <div id="festival"> 
        <p> 
         <a href="assets/img/varias/album/festival/plant1.jpg" title="Imagen 1" class="thickbox" rel="ultimo-festival"> 
          <img src="assets/img/varias/album/festival/plant1_t.jpg" alt="Imagen 1" /> 
         </a> 
         <a href="assets/img/varias/album/festival/plant2.jpg" title="Imagen 2" class="thickbox" rel="ultimo-festival"> 
          <img src="assets/img/varias/album/festival/plant2_t.jpg" alt="Imagen 2" /> 
         </a> 
         <a href="assets/img/varias/album/festival/plant3.jpg" title="Imagen 3" class="thickbox" rel="ultimo-festival"> 
          <img src="assets/img/varias/album/festival/plant3_t.jpg" alt="Imagen 3" /> 
         </a> 
         <a href="assets/img/varias/album/festival/plant4.jpg" title="Imagen 4" class="thickbox" rel="ultimo-festival"> 
          <img src="assets/img/varias/album/festival/plant4_t.jpg" alt="Imagen 4" /> 
         </a> 
        </p> 
       </div> 

       <div id="cursos"> 
        <p>Im&aacute;genes de Cursos aqu&iacute;</p> 
       </div> 

       <div id="viajes"> 
        <p>Im&aacute;genes de Viajes aqu&iacute;</p> 
       </div> 
      </div> 
     </div> 
    </div> 

Das Problem ist, wenn jemand auf einen Link von meinem Menü klickt und aktiviert die „fancybox“ -Effekt und danach versucht, auf ein Element der zweiten $ (function() Ereignis, das ich im Zusammenhang mit klicken, erhalten Dieser Fehler:

$clicked.css is not a function (?)()()album.html (ligne 24) ready()()jquery.min.js (ligne 26) trigger()()jquery.min.js (ligne 25) [Break on this error] if (($clicked.css("opacity") != "1") && ($clicked.is(":not(animated)"))) {

Aber ich weiß immer noch nicht, warum ... Ich habe versucht, es zu beheben, aber ich kann mir nicht korrekte Syntax, weil nach =/

---

Edit 2 Antwort

I Ich habe tat, was vorgeschlagen wurde, wenn ich es klicken, bevor die "fancybox" Effekt, den ich in der Alert-Box erhalten eine [object Object] danach I [Objekt HTMLDivElement] und die gleichen Fehler wie auch ...

---

Aufruf Bearbeiten Sie

Mithilfe von firebug und console.log(); Ich bemerkte etwas, wenn ich vor auf die „fancybox“ calling ich zurück:

Object 0=div#cursos-button.button length=1 jquery=1.2.6 

Aber nachdem es ich genannt haben:

<div id="cursos-button" class="button" style="border-width: 1px; opacity: 0.5;"> 

Nun, warum ... um herauszufinden,

---

bearbeiten

ich weiß immer noch nicht, warum das passiert aber ich habe es mit jQuery.noConflict() behoben; wie auch immer, wenn jemand tun weiß, warum dies geschehen ist, würde ich es begrüßen, wenn Sie mir sagen =)

Answer 1

zu starten:

1 - Versuchen Sie, die zwei anonyme Funktionen innerhalb der $ (document) .ready setzen()

2 - Lassen Sie sich von dem $ prefix los auf $ geklickt Variable, dass verwirrend jQuery werden könnte - Aber bevor Sie das Präfix zu ändern, machen Sie eine Benachrichtigung (geklickt $) nach dieser Zeile:

$clicked = $(this); 
alert($clicked); //to see if it's an object or null 

Lassen Sie uns wissen, was passiert

Answer 2

Ich verstehe nicht, den Zweck Ihrer 2

$(function() { 
... 

, die in Ihrem Dokument bereit Handler erscheinen.Das Idiom ist eine Abkürzung für

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

So - meinen Sie wirklich mehr Dokument bereit Handler in Ihre äußere Dokument bereit Handler zu wickeln?

PS: eine Javascript-Variable mit einem $ Präfixbenennungskontext ist völlig legal, wird nicht jQuery verwirren, und in der Tat wird empfohlen, für das Halten jQuery Objekte