Javascript and JQuery conflict

本文关键字：conflict JQuery and Javascript 更新时间：2023-09-26

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

我发现，如果禁用第一个脚本（面板），第二个脚本可以正常工作，反之亦然。我在页面的头部尝试了usingn 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';
});
});

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

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

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

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

如果您想继续遵循该模式，请将其中一个函数包装在另一个函数上，并从另一个调用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

如果您想同时使用两个库，请检查此答案。