奇怪的 javascript 错误（使用 jQuery）

Question

我有一个代码可以抓取按钮单击然后消失实际内容并使单击项目的内容出现。我将它与我拥有的 init.js 文件中的其他薄项一起运行：

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

但只有第二个 $(function() 是在此事件期间执行的。回答此问题的 HTML 代码是：

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

问题是，当有人单击我菜单中的链接并激活“fancybox”效果，然后尝试单击与第二个 $(function() 事件相关的项目时，我收到此错误：

$clicked.css 不是函数 (?)()()album.html (第 24 行) 准备好（）（）jquery.min.js（第26行） trigger()()jquery.min.js (ligne 25) [打破这个错误]如果 (($clicked.css("opacity") != "1") && ($clicked.is(":not(animated)"))) {

但我仍然不知道为什么...我试图修复它但我不能，因为根据我的说法我有正确的语法 =/

---

编辑 2 个答案

如果在调用“fancybox”效果之前单击它，我会按照建议执行操作

---

编辑

通过使用 firebug 和 console.log();我注意到了一些事情，如果我在调用“fancybox”之前单击，我会返回：

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

但是在调用它之后我得到：

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

现在想弄清楚为什么......

---

编辑

我仍然不知道为什么会发生这种情况，但是我使用 jQuery.noConflict(); 修复了它。无论如何，如果有人知道为什么会发生这种情况，如果你告诉我，我将不胜感激 =)

Answer 1

开始：

1 - 尝试将两个匿名函数放在 $(document).ready() 中

2 - 去掉 $clicked 变量上的 $ 前缀，这可能会使 jQuery 感到困惑 - 但在更改前缀之前，请在此行之后执行 alert($clicked)：

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

让我们知道会发生什么

Answer 2

我不明白你 2 的目的

$(function () {
...

出现在您的文档就绪处理程序中。这个成语是

的简写

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

那么 - 你真的要在你的外部文档就绪处理程序中包装更多的文档就绪处理程序吗？

PS：用 $ 前缀命名 javascript 变量是完全合法的，不会混淆 jQuery，实际上建议用于保存 jQuery 对象