JavaScript 和 JQuery 冲突

Question

我不太擅长使用 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';
});

});

有人可以帮助我吗？谢谢你，祝你有美好的一天!

Answer 1

您正在使用两种不同的方式来添加文档就绪事件中要发生的事情:

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