爲什麼我的文章函數不能訪問它上面的變量？

Question

我試圖弄清楚爲什麼post函數在下面的代碼末尾沒有訪問userID變量（我假設它是一個範圍問題，因爲在函數返回正確值之前立即記錄userId）。

$.get("/set_languages_user", function(res) { 
    console.log(res) 

    if (res.length === 0) { 

     var getUserInfo = $.get('/set_user', function(res){ 

      var langConfirmSource = $('#language-confirmation-template').html(); 
      var langConfirmCompiled = Handlebars.compile(langConfirmSource); 
      var langConfirmTemplate = langConfirmCompiled(res) 
      $('body').append(langConfirmTemplate) 
      $('html').toggleClass('disable_scrolling') 

      var userId = res.id 
      var native_language = res.native_language 
      var learning_language = res.learning_language 

      $(document).on('submit', '#language_confirmation', function(e){ 

       e.preventDefault() 

       // prevent user from continuing if they haven't checked that they agree to the term's of use 
       if ($('#touCheck').is(':checked')) { 
        console.log('checked!!!') 

        // this function finds the ID of the User's defined languages 
        var getUserInfo = $.get('/languages.json', function(lang){ 

         // Find the ID of the languages the User is supporting in order to submit to languages_users db 
         for (i = 0; i < lang.length; i++) { 
          if (lang[i].language === native_language) { 
           var confirmedUserNativeInt = lang[i].id 
          } 
         } 

         for (i = 0; i < lang.length; i++) { 
          if (lang[i].language === learning_language) { 
           var confirmedUserLearningInt = lang[i].id 
          } 
         } 

         console.log(confirmedUserNativeInt) 
         console.log(confirmedUserLearningInt) 
         console.log(userId) 


         // creates a new instance in languages_user for the learningLanguage (level 1) 
         $.post("/languages_users", { languages_user:{ language_id: confirmedUserLearningInt, user_id: userId, level: 1 }}) 

         // creates a new instance in languages_user for the nativelanguage (level 5) 
         $.post("/languages_users", { languages_user:{ language_id: confirmedUserNativeInt, user_id: userId, level: 5 } }) 

         $('.signon_language_confirmation').remove() 
         $('html').toggleClass('disable_scrolling') 
        }); 

       } else { 
        console.log('not checked!!!') 

        $('.wrapper_tou_signup').append('<p class="message_form_error">You must agree to Lexody\'s Terms of Use to continue.</p>') 
       } 
      }) 
     }); 
    } 
}) 

這裏所呈現的車把模板：

<script id="language-confirmation-template" type="text/x-handlebars-template"> 
<div class="signon_language_confirmation"> 

    <p class="title_langconf">Welcome to</p> 

    <img src=""> 
    <div class="wrapper_form_dark language_confirmation_form wrapper_form_sign_on"> 
     <form id="language_confirmation"> 
      <div class="form_section"> 
       <div class="wrapper_input col_16_of_16"> 
        <p>I speak {{native_language}} <svg class="icon_standard"><use xlink:href="#{{native_language}}"/></svg></p> 
        <p>I am learning {{learning_language}} <svg class="icon_standard"><use xlink:href="#{{learning_language}}"/></svg></p> 

        <div class="wrapper_tou_signup"> 
         <p><input type="checkbox" name="tou" value="agree" id="touCheck"> I agree to Lexody's <a href="#">terms of use</a>.</p> 
        </div> 
        <div class="submit_cancel"> 
         <input type="submit" value="Submit" class="btn_primary submit"> 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

當我提交我得到 「未捕獲的ReferenceError：用戶id沒有定義（......）」。如何讓這些變量可以被這些函數訪問，爲什麼這個變量不可訪問，但是其他變量（'confirmedUserLearningInt'和'confirmedUserNativeInt'）是？

在此先感謝。

Answer 1

你還沒有聲明var的post方法可以到達的地方，正如你在代碼中看到的，這些vars在for循環中的if語句中，你應該在for循環之前聲明var ：

 $.get("/set_languages_user", function(res) { 
 
     console.log(res) 
 
    
 
     if (res.length === 0) { 
 
    
 
      var getUserInfo = $.get('/set_user', function(res){ 
 
    
 
       var langConfirmSource = $('#language-confirmation-template').html(); 
 
       var langConfirmCompiled = Handlebars.compile(langConfirmSource); 
 
       var langConfirmTemplate = langConfirmCompiled(res) 
 
       $('body').append(langConfirmTemplate) 
 
       $('html').toggleClass('disable_scrolling') 
 
    
 
       var userId = res.id 
 
       var native_language = res.native_language 
 
       var learning_language = res.learning_language 
 
    
 
       $(document).on('submit', '#language_confirmation', function(e){ 
 
    
 
        e.preventDefault() 
 
    
 
        // prevent user from continuing if they haven't checked that they agree to the term's of use 
 
        if ($('#touCheck').is(':checked')) { 
 
         console.log('checked!!!') 
 
    
 
         // this function finds the ID of the User's defined languages 
 
         var getUserInfo = $.get('/languages.json', function(lang){ 
 
    
 
          // Find the ID of the languages the User is supporting in order to submit to languages_users db 
 
          var confirmedUserNativeInt; //<<<<<<<<<<<<<< 
 
          for (i = 0; i < lang.length; i++) { 
 
           if (lang[i].language === native_language) { 
 
            confirmedUserNativeInt = lang[i].id 
 
           } 
 
          } 
 
          var confirmedUserLearningInt;//<<<<<<<<<<<<<<<< 
 
          for (i = 0; i < lang.length; i++) { 
 
           if (lang[i].language === learning_language) { 
 
            confirmedUserLearningInt = lang[i].id 
 
           } 
 
          } 
 
    
 
          console.log(confirmedUserNativeInt) 
 
          console.log(confirmedUserLearningInt) 
 
          console.log(userId) 
 
    
 
    
 
          // creates a new instance in languages_user for the learningLanguage (level 1) 
 
          $.post("/languages_users", { languages_user:{ language_id: confirmedUserLearningInt, user_id: userId, level: 1 }}) 
 
    
 
          // creates a new instance in languages_user for the nativelanguage (level 5) 
 
          $.post("/languages_users", { languages_user:{ language_id: confirmedUserNativeInt, user_id: userId, level: 5 } }) 
 
    
 
          $('.signon_language_confirmation').remove() 
 
          $('html').toggleClass('disable_scrolling') 
 
         }); 
 
    
 
        } else { 
 
         console.log('not checked!!!') 
 
    
 
         $('.wrapper_tou_signup').append('<p class="message_form_error">You must agree to Lexody\'s Terms of Use to continue.</p>') 
 
        } 
 
       }) 
 
      }); 
 
     } 
 
    })