Jquery重複したJqueryセレクタ

Question

連絡先フォームエラー発信者を作成しようとしています。

私のJqueryコードは、私と同じ問題に重複jQueryセレクタ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")で重複セレクタだと言いました。しかし、最初はvarsを同じにしました。だからvar $nameとvar $name_errorは同じ値だった：("#name")今、私は("#name_error")に変更しましたが、私はupponを("#name")と呼んでいます。

誰かが私にこのエラーを説明することができたり、これを修正してもらえれば、ドキュメントには同じことが書かれているとうれしいでしょう。あなたはすべての価値に特定の名前を付ける必要があります。私はそれをしましたが、それでもそのエラーを言っています。あなたが二回

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

私の推測がある#addressを選択している

Answer 1

、あなたはこのコードを持っている必要があります：

：同様に

$address_error = $("#address_error") 

を、あなたのコード内で、次の重複セレクタを持っています

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

次のコードには、重複するJqueryセレクタの混乱がありません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>