Jquery重复jquery选择器

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

以下代码没有任何Duplicate Jquery Selector混乱PhpStorm中的年龄段：

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