javascript - 奇怪的 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 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)"))) {

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

<小时/>

编辑 2 个答案

我做了建议的操作，如果我在调用“fancybox”效果之前单击它，我会在警报框中得到一个 [object Object]，之后我会得到 [object HTMLDivElement] 和相同的错误...

<小时/>

编辑

通过使用 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 - 但在更改前缀之前，请在此行之后执行警报($clicked):

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

让我们知道发生了什么