Jquery 重复 Jquery 选择器

Question

我正在尝试构建联系表单错误调用程序。

我的 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") 它一直说它是一个重复。

如果有人可以向我解释此错误或对此有修复，我会很高兴文档中有同样的说明。你必须给每个值一个特定的名称，我就是这么做的，但它仍然说错误。

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>

Jquery 重复 Jquery 选择器

Jquery Duplicate Jquery selector

javascript

jquery

contact-form