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的情况一样）。

jQuery与Joomla YooTheme WidgetKit冲突

1 个答案: