2

我目前正在为本地客户开发 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>
4

1 回答 1

4

jQuery.noConflict();将 jQuery 库包含到您的页面后直接调用。这是因为一些库也尝试使用该$符号并与 jQuery 发生冲突。这会将其在全球范围内交还给他们。

您仍然可以$通过(function($){ ... })(jQuery).

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

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

于 2013-05-18T14:23:57.873 回答