jQuery与Joomla YooTheme WidgetKit冲突

Question

我正在为一个本地客户开发一个Joomla网站。

我有一个jQuery冲突，这让我头疼！

我从YooTheme运行这个模板：http://www.yootheme.com/demo/themes/joomla/2013/infinite/

顶部的幻灯片是由jQuery控制的。它是由YooThemes "WidgetKit“运行的。

我有一个简单的联系形式，这是使用jQuery验证(电子邮件地址等)。

每当我将联系人表单放到网站上时，顶部的幻灯片就会消失。

这是jQuery代码：

<script src="********/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery.noConflict();

function isInt(n) {
return typeof n === 'number' && n % 1 == 0;
}

// Form validation
jQuery(".darkBtn").click(function(e) {
e.preventDefault();
var email_check = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i;
var email = jQuery("form.form_contact .email").val();

var zipCheck = /[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}/i;
var zip = jQuery("form.form_contact .zipcode").val();

var phoneCheck = /^\d+$/;
var phone = jQuery("form.form_contact .phone").val();

var error = "";

if(!email_check.test(email))
{
error = "Please give a valid email address."

}

if(!zipCheck.test(zip))
{
error = "Please give a valid postcode.";
}

if(!phoneCheck.test(phone) || phone.length != 11)
{
error = "Please give a valid phone number.";
}


// No error ? -> Submit
if(error == "")
{
jQuery(".form_error").hide();
jQuery("form#contact_form").submit();
} else {
jQuery(".form_error").empty().text(error);
jQuery(".form_error").show();
}
});
});

</script>

我的一个朋友知道非常基本的jQuery，他为我写了这个。然而，他不知道足够的知识来解决这个问题。当涉及到jQuery时，我不知道。

我做了一点阅读，发现某个地方说尝试将代码中的"$“改为"jQuery”，这就是为什么它有"jQuery“而不是"$”符号的原因。

我怎样才能让这两者协同工作呢？任何帮助都是非常感谢的。

在下面的注释中请求的新代码：

<script src="********/js/$.js" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict();
$(document).ready(function($) {


function isInt(n) {
return typeof n === 'number' && n % 1 == 0;
}

// Form validation
$(".darkBtn").click(function(e) {
e.preventDefault();
var email_check = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i;
var email = $("form.form_contact .email").val();

var zipCheck = /[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}/i;
var zip = $("form.form_contact .zipcode").val();

var phoneCheck = /^\d+$/;
var phone = $("form.form_contact .phone").val();

var error = "";

if(!email_check.test(email))
{
error = "Please give a valid email address."

}

if(!zipCheck.test(zip))
{
error = "Please give a valid postcode.";
}

if(!phoneCheck.test(phone) || phone.length != 11)
{
error = "Please give a valid phone number.";
}


// No error ? -> Submit
if(error == "")
{
$(".form_error").hide();
$("form#contact_form").submit();
} else {
$(".form_error").empty().text(error);
$(".form_error").show();
}
});
});

</script>

Answer 1

在页面上包含jQuery库之后，直接调用jQuery.noConflict();。这是因为一些库还试图使用$符号，并与jQuery发生冲突。这将把它交还给全局作用域上的它们。

您仍然可以在jQuery代码中使用$，方法是通过(function($){ ... })(jQuery)确保它只在函数的作用域内(这样它就不会影响其他库)。

jQuery.noConflict();
jQuery(document).ready(function($) {
   ... Your jQuery code here
}

编辑：当您在同一页面上多次包含jQuery时，可能会发生相同的行为(就像OP的情况一样)。