如何从一个函数传递变量给另一个函数

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

});