Как передать переменную из функции другой функции

Question

Variable 'URL' неопределен внутри функции мыши, но она доступна внутри функции 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 в var url = "abc.com?" + carsIds;.

Ключевое слово 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 функцию, так что вы можете вызвать его в другом месте, а затем сделать его вернуть 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; 
    } 

});