Javascript和JQuery冲突
Javascript和JQuery冲突
提问于 2012-03-27 22:39:12
我不太擅长使用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';
});
});有人能帮我吗？谢谢你，祝你有愉快的一天！
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-03-27 22:48:13
您正在使用两种不同的方法向文档就绪事件中添加要发生的事情：
$(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 DOMStack Overflow用户
发布于 2012-03-27 23:19:13
混合了两个不同的库。这不是个好主意。
如果您希望继续遵循该模式，请将其中一个函数包装在另一个函数中，然后从另一个函数调用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 answer
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9891751
复制相关文章
相似问题
腾讯云开发者
