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代码（hide / show field）：

$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

Answer 2

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

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

像：

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答案

Javascript和JQuery冲突

2 个答案:

然后从另一个