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（ligne 24） ready（）（）jquery.min.js（ligne 26） trigger（）（）jquery.min.js（ligne 25） [打破此错误]如果（（$ clicked.css（“opacity”）！=“1”）＆amp;＆amp; （$ clicked.is（“：not（animated）”）））{

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

编辑2回答

如果我在调用“fancybox”效果之前点击它，我会在警告框中找到一个[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

让我们知道会发生什么

Answer 2

我不明白你的目的

$(function () {
...

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

的简写

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

那么 - 你的意思是将更多的文档就绪处理程序包装在外部文档就绪处理程序中吗？

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

奇怪的javascript错误（使用jQuery）

2 个答案: