如何從一個函數傳遞變量給另一個函數

Question

變量 '網址' 是點擊功能裏面不確定的，但它是可用buildUrl函數內部

HTML：

<label class="secondary" for="car01"> 
    <input type="checkbox" id="car01" name="carid" value="car01" checked>Select<span></span> 
</label> 
<label class="secondary" for="car02"> 
    <input type="checkbox" id="car02" name="carid" value="car02" checked>Select<span></span> 
</label> 

JS：

$(document).ready(function() { 
    //Init 
    buildUrl(); 
var url; 
    // Listen to change event 
    $('.selected-cars input[type=checkbox]').change(function (e) { 
     e.preventDefault(); 
     if($(this).prop('checked')){ 
      $(this).val(); 
       buildUrl(); 
       $('.button').click(function() { 
        console.log('Click happen'); 
        console.log('url', url); 
        $('.button').attr('href', url); 
       }); 
     }else{ 
      $(this).val(); 
       buildUrl(); 
     } 
    }); 
    // Build URL 
    function buildUrl(){ 
      var carIds = $("input[type=checkbox]:checked").serialize(); 
      var url = "abc.com?" + carsIds; 
      console.log('url', url); 
    }; 
}); 

Answer 1

刪除var url = "abc.com?" + carsIds;中的var。

var關鍵字會創建一個新的url，它的本地範圍爲buildUrl函數。如果您離開var，則將分配給您在外部範圍內聲明的url。

function buildUrl(){ 
     var carIds = $("input[type=checkbox]:checked").serialize(); 
     url = "abc.com?" + carsIds; 
     console.log('url', url); 
}; 

然而，修改範圍之外的這樣的變量的函數常常使對代碼更難跟隨，特別是當它不是一個已知設計圖案的一部分。

看起來你也想立即更新按鈕的href，而不是等待某人點擊它。我建議簡化您的代碼：

$(document).ready(function () { 

    // Listen to change event 
    $('.selected-cars input[type=checkbox]').change(function () { 

     var carIds = $("input[type=checkbox]:checked").serialize(); 
     var url = "abc.com?" + carsIds; 

     // Update button href 
     $('.button').attr('href', url); 

    }); 

}); 

如果你想有一個buildUrl功能，讓您可以在其他地方調用它，然後使它返回，而不是從外部作用域賦值給一個變量的網址：

$(document).ready(function () { 

    // Listen to change event 
    $('.selected-cars input[type=checkbox]').change(function () { 

     var url = buildUrl(); 

     // Update button href 
     $('.button').attr('href', url); 

    }); 

    function buildUrl () { 
     var carIds = $("input[type=checkbox]:checked").serialize(); 
     return "abc.com?" + carIds; 
    } 

});