我正在尝试构建联系表单错误调用程序。
我的 Jquery 代码只是说 Duplicate jQuery Selector closest thing i could find和我一样的问题。但我尝试实现人们针对该问题给出的解决方案，但没有奏效。我会展示我的尝试。也许有人在这里看到了问题。
这是我的代码。
<script>
$(document).ready(function () {
$("#submit").click(function (e) {
e.preventDefault();
var $name = $("#name"),
$email = $("#email"),
$phone = $("#phone"),
$address = $("#address"),
$message = $("#message");
var $name_error = $("#name_error"),
$email_error = $("#email_error"),
$telephone_error = $("#telephone_error"),
$message_error = $("#message_error"),
$address_error = $("#address");
var data = {
name: $name.val(),
email: $email.val(),
telephone: $phone.val(),
address: $address.val(),
message: $message.val()
};
$.ajax({
type: "POST",
url: "/api/contact/submit",
data: data,
success: function (data) {
console.log(data);
$('#error_list').empty();
$('#show_error').hide();
if (data.hasOwnProperty('errors')) {
// Show de errors.
$.each(data.errors, function (entry) {
switch (entry) {
case 'email':
$('#error_list').append('<li>' + data.errors.email + '</li>');
$email_error.show();
break;
case 'name':
$('#error_list').append('<li>' + data.errors.name + '</li>');
$name_error.show();
break;
case 'message':
$('#error_list').append('<li>' + data.errors.message + '</li>');
$message_error.show();
break;
case 'message':
$telephone_error.show();
break;
case 'message':
$address_error.show();
break;
}
});
$('#show_error').show();
}
console.log("banaan");
// Reset het form
// Show succcess
$("#contact-form").trigger('reset');
$("#success_message").show();
},
dataType: "json"
});
});
});
</script>
var 标签给我这个错误。并且它在示例 ("#name") 中说它是一个重复的选择器。但起初我有相同的变量。所以 var $name 和 var $name_error 是相同的值:("#name") 现在我将一个更改为 ("#name_error") 而我在其他任何地方都调用了 uppon ("#name")，它一直说它是重复的。
如果有人可以向我解释此错误或对此进行修复，我会很高兴文档中的说明相同。你必须给每个值一个特定的名称，我就是这么做的，但它仍然说错误。
最佳答案
您选择了两次#address
$address = $("#address"),
(...)
$address_error = $("#address");
我的猜测是，您应该拥有以下代码:
$address_error = $("#address_error")
出于同样的原因，您的代码中有以下重复的选择器:
$('#error_list')
$('#show_error')
以下代码在 PhpStorm 中没有任何重复的 Jquery Selector 消息:
<script>
$(document).ready(function () {
$("#submit").click(function (e) {
e.preventDefault();
var $name = $("#name"),
$email = $("#email"),
$phone = $("#phone"),
$address = $("#address"),
$message = $("#message");
var $name_error = $("#name_error"),
$email_error = $("#email_error"),
$telephone_error = $("#telephone_error"),
$message_error = $("#message_error"),
$address_error = $("#address_error");
var $error_list = $('#error_list'),
$show_error = $('#show_error');
var data = {
name: $name.val(),
email: $email.val(),
telephone: $phone.val(),
address: $address.val(),
message: $message.val()
};
$.ajax({
type: "POST",
url: "/api/contact/submit",
data: data,
success: function (data) {
console.log(data);
$error_list.empty();
$show_error.hide();
if (data.hasOwnProperty('errors')) {
// Show de errors.
$.each(data.errors, function (entry) {
switch (entry) {
case 'email':
$error_list.append('<li>' + data.errors.email + '</li>');
$email_error.show();
break;
case 'name':
$error_list.append('<li>' + data.errors.name + '</li>');
$name_error.show();
break;
case 'message':
$error_list.append('<li>' + data.errors.message + '</li>');
$message_error.show();
break;
case 'message':
$telephone_error.show();
break;
case 'message':
$address_error.show();
break;
}
});
$show_error.show();
}
console.log("banaan");
// Reset het form
// Show succcess
$("#contact-form").trigger('reset');
$("#success_message").show();
},
dataType: "json"
});
});
});
</script>
关于javascript - Jquery 复制 Jquery 选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42574319/