Jquery Duplicate Jquery selector

Question

我正在尝试构建一个联系表单错误调用方。

我的Jquery代码只是说重复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")并且它一直说它是重复。

如果有人可以向我解释这个错误或对此有一个解决方案我会很高兴文档说的相同。你必须给每个值一个特定的名称，我只是这样，但它仍然说错误。

Answer 1

您选择#address两次

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

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

$address_error = $("#address_error")

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

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

以下代码在PhpStorm中没有任何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_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>