Javascript和JQuery冲突

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

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

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

---

有人能帮我吗？谢谢你，祝你今天愉快

您正在使用两种不同的方式将要发生的事情添加到document ready事件中：

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

及

也许你只要用一个就行了；也许下面的代码可以工作；我将其全部放在第一个选项中，以便在document ready上运行代码：

我编辑了下面的代码并删除了所有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

$（文档）.ready（函数（）{
//让我们根据单击“显示/隐藏”链接来切换顶部面板
$（“#子面板”）。单击（函数（）{
//把横杆向上拨动
$（“#顶部面板”）.slideToggle（）；
//背景
var el=$（“#shText”）；
//让我们知道元素内部的内容
var state=$（“#shText”）.html（）；
//改变状态
状态=（状态='nacondi'？'Entra'：'nacondi'）；
//最后更改元素ID中的内容
el.替换为（州）；
})；//结束子面板单击功能
document.getElementById（'motivo_contatto'）。onchange=function（）{
if（document.getElementById（'motivo_contatto'）。value=='Invia CV'）{
document.getElementById（'upload_file'）。style.visibility='visible'；
}否则{
document.getElementById（'upload_file'）。style.visibility='hidden'；
}
};
document.getElementById（'upload_file'）。style.visibility='hidden'；
}); // 结束于DOM

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

如果您想继续遵循该模式，请将其中一个函数包装到另一个函数上，并从另一个函数调用If

比如：

然后从另一个地方打电话

$（文档）.ready（函数（）{
moo（）；//调用moo函数
//让我们根据单击“显示/隐藏”链接来切换顶部面板
$（“#子面板”）。单击（函数（）{
//把横杆向上拨动
$（“#顶部面板”）.slideToggle（）；
//背景
var el=$（“#shText”）；
//让我们知道元素内部的内容
var state=$（“#shText”）.html（）；
//改变状态
状态=（状态='nacondi'？'Entra'：'nacondi'）；
//最后更改元素ID中的内容
el.替换为（州）；
})；//结束子面板单击功能
}); // 结束于DOM

---

---

检查答案，如果你想同时使用这两个库

那么“js代码”将显示为mootools？嗨，Marc B，我真的不知道，因为我发现这个脚本使用了Chronoforms。在管理面板中有一个按钮，上面写着“JS代码”。我以为是JavaScript的。但我不确定……好吧，jquery使用.ready（），mootools使用.addEvent（'domready'）。检查页面的标题以查看正在加载的库。在第二个块中有一个额外的结束括号和parenethesis。为什么我们需要两种不同的文档准备事件方式。我们不能在两个地方都使用其中一个吗？嗨，汤姆，谢谢你的回答。我尝试使用您建议的脚本，但现在所有脚本都不起作用。有什么想法吗？我刚刚编辑过；你现在可以试试，但是你不能用firebug进行调试吗？例如，我删除了mootools代码，并用纯javascript替换了它；也许现在可以了。我不知道，也许你也必须从你的页面中删除mootools导入。如果你使用mootools来做其他事情，这似乎不是一个选项。我是Tom，我在使用Chrome，在调试面板中我发现了这个错误：UncaughtTypeError:Object[Object Object]没有方法“addEvent”，你试过我文章中的最后一个版本吗？它不再使用addEvent。

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

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

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

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