Javascript 和 JQuery 冲突答案

【问题标题】：Javascript and JQuery conflictJavascript 和 JQuery 冲突
【发布时间】：2012-03-27 23:19:13
【问题描述】：

我不是很擅长使用 javascript 和 jquery，但我正在为客户使用它们。
我在使用两个脚本时遇到了问题：第一个使顶部面板滑动，第二个在表单中。此选项用于根据下拉列表选择隐藏或显示特定字段。

我发现如果我禁用第一个脚本（面板），第二个脚本工作正常，反之亦然。我尝试在页面头部使用 JQuery noConflict() 但什么也没发生。

这里是第一个脚本（滑动面板）的代码：

$(document).ready(function () {
    // Lets make the top panel toggle based on the click of the show/hide link  
    $("#sub-panel").click(function () {
        // Toggle the bar up 
        $("#top-panel").slideToggle();
        // Settings
        var el = $("#shText");
        // Lets us know whats inside the element
        var state = $("#shText").html();
        // Change the state  
        state = (state == 'Nascondi' ? '<span id="shText">Entra</span>' : '<span id="shText">Nascondi</span>');
        // Finally change whats insdide the element ID
        el.replaceWith(state);
    }); // end sub panel click function
}); // end on DOM

这里是表单的 JS 代码（隐藏/显示字段）：

$document.addEvent('domready', function () {

    $('motivo_contatto').addEvent('change', function () {
        if ($('motivo_contatto').value == 'Invia CV') {
            $('upload_file').style.visibility = 'visible';
        } else {
            $('upload_file').style.visibility = 'hidden';
        }
    });
    $('upload_file').style.visibility = 'hidden';
});

});

谁能帮帮我？谢谢你，祝你有美好的一天！

【问题讨论】：

“js 代码”似乎是 mootools？
嗨，Marc B，我真的不知道，因为我是使用 Chronoforms 找到这个脚本的。在管理面板中有一个“JS 代码”按钮。我想它是一个 JavaScript 的。但我不确定……
嗯，jquery 使用 .ready()，mootools 使用 .addEvent('domready')。检查页面标题以准确了解正在加载哪些库。
第二个块中有一个额外的右括号和括号。
为什么我们需要两种不同的方式来记录就绪事件。我们不能在两个地方都使用其中一个吗？

标签： javascript jquery

【解决方案1】：

您正在使用 2 种不同的方式将要发生的事情添加到文档就绪事件：

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

和

$document.addEvent('domready', function() { ... });

也许你只用一个就行了；也许下面的代码会起作用；我把它全部放在第一个选项中，以便在准备好的文档上运行代码：

我编辑了下面的代码并删除了所有 mootools 代码；所以它现在可以工作了。

$(document).ready(function(){
    // Lets make the top panel toggle based on the click of the show/hide link  
    $("#sub-panel").click(function(){
        // Toggle the bar up 
        $("#top-panel").slideToggle();  
        // Settings
        var el = $("#shText");  
        // Lets us know whats inside the element
        var state = $("#shText").html();
        // Change the state  
        state = (state == 'Nascondi' ? '<span id="shText">Entra</span>' : '<span id="shText">Nascondi</span>');          
        // Finally change whats insdide the element ID
        el.replaceWith(state); 
    }); // end sub panel click function

    document.getElementById('motivo_contatto').onchange = function() {
        if(document.getElementById('motivo_contatto').value == 'Invia CV') {
            document.getElementById('upload_file').style.visibility = 'visible';
        } else {
            document.getElementById('upload_file').style.visibility = 'hidden';
        }
    };
    document.getElementById('upload_file').style.visibility = 'hidden';
}); // end on DOM

【讨论】：

嗨，汤姆，感谢您的回答。我尝试使用您建议的脚本，但现在所有脚本都不起作用。有什么想法吗？
我刚刚编辑过；您现在可以尝试一下，但您不能使用 firebug 进行调试吗？
我删除了mootools代码并用纯javascript替换了它；也许它现在可以工作了。也许您还必须从您的页面中删除 mootools 导入，我不知道。如果您将 mootools 用于其他事情，这似乎不是一个选择
嗨，Tom，我正在使用 Chrome，在调试面板中我发现了这个错误：Uncaught TypeError: Object [object Object] has no method 'addEvent'
您尝试过我帖子中的最后一个版本吗？它不再使用 addEvent 了。

【解决方案2】：

混合两个不同的库。不是一个好主意。

如果您想继续遵循该模式，请将其中一个函数包装在另一个函数上，然后从另一个函数调用 if。

喜欢：

function moo()  {

    $('motivo_contatto').addEvent('change', function () {
            if ($('motivo_contatto').value == 'Invia CV') {
                $('upload_file').style.visibility = 'visible';
            } else {
                $('upload_file').style.visibility = 'hidden';
            }
        });
        $('upload_file').style.visibility = 'hidden';
    });

}

然后从另一个调用它

$(document).ready(function () {
    moo(); // Call the moo function


    // Lets make the top panel toggle based on the click of the show/hide link  
    $("#sub-panel").click(function () {
        // Toggle the bar up 
        $("#top-panel").slideToggle();
        // Settings
        var el = $("#shText");
        // Lets us know whats inside the element
        var state = $("#shText").html();
        // Change the state  
        state = (state == 'Nascondi' ? '<span id="shText">Entra</span>' : '<span id="shText">Nascondi</span>');
        // Finally change whats insdide the element ID
        el.replaceWith(state);
    }); // end sub panel click function
}); // end on DOM

查看this 答案，如果您想同时使用这两个库

【讨论】：