Jquery 重复 Jquery 选择器

Question

我正在尝试建立一个联系表单错误来电者。

我的 Jquery 代码只是说 Duplicate 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");


                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")，但我没有其他地方调用它 ("#name")，并且它一直说它是重复的。

如果有人可以向我解释这个错误或解决这个问题，我会很高兴文档也这么说。你必须给每个值一个特定的名称，我就是这样做的，但仍然显示错误。

Answer 1

您选择了#address两次

$address = $("#address"),
(...)
$address_error = $("#address");

我的猜测是，你应该有这样的代码：

$address_error = $("#address_error")

出于同样的原因，您的代码中有以下重复的选择器：

$('#error_list')
$('#show_error')

以下代码在 PhpStorm 中没有任何重复的 Jquery 选择器消息：

<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>