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

Variable 'url' is undefined inside click function but it is available inside buildUrl function

变量'url'在click函数中未定义,但在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);
    };
});

1 个解决方案

#1

Remove the var in var url = "abc.com?" + carsIds;.

删除var in ur url =“abc.com?” + carsIds;。

The var keyword creates a new url which is locally scoped to the buildUrl function. If you leave off var you will be assigning to the url that you declared in the outer scope.

var关键字创建一个新的url,它本地作用于buildUrl函数。如果您不使用var,则将分配您在外部作用域中声明的URL。

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

However, a function which modifies a variable outside its own scope like that often makes for code that is harder to follow, especially when its not part of a known design pattern.

但是,在其自身范围之外修改变量的函数通常会使代码更难以遵循,特别是当它不是已知设计模式的一部分时。

It seems like you also want to update the href of the button right away, instead of waiting for someone to click on it. I would recommend simplifying your code to:

看起来您还想立即更新按钮的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 );

    });

});

If you want to have a buildUrl function so that you can call it elsewhere, then make it return the url instead of assigning to a variable from an outer scope:

如果你想拥有一个buildUrl函数,以便你可以在别处调用它,那么让它返回url而不是从外部作用域分配给变量:

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

});

#1