Почему я не могу увеличить глобальную переменную

Question

Я создал переменную q вне любой функции. Изнутри моей функции я пытаюсь просто увеличить его с помощью ++. Будет ли этот прирост глобальным q или это просто добавляет значение к локальной переменной? Как вы можете видеть в примере кода ниже, я пытаюсь использовать значение глобальной переменной (которую я намерен обновлять при каждом выполнении этого скрипта), чтобы установить переменную, которая должна запускать эту функцию через .change. Функция первоначально запускается (когда q = 1), однако она не является триггером, когда выбор сделан из раскрывающегося списка с id = "selectedId2", что заставляет меня полагать, что q сохранил значение 1, хотя я успешно увеличил его когда функция выполнялась раньше. Любые рекомендации о том, как я могу увеличивать переменную «q» для каждой итерации этого скрипта, будут очень благодарны.

if (q === 1) { 
     selectedDiv = '#selectId1'; 
     selectedDiv2 = '#selectId2'; 
    } 
    if (q === 2) { 
     selectedDiv = '#selectedId2'; 
     selectedDiv2 = '#selectedId3'; 
    } 
    if (q === 3) { 
     selectedDiv = '#selectedId3'; 
     selectedDiv2 = '#selectedId4'; 
    } 
    if (q === 4) { 
     selectedDiv = '#selectedId4'; 
     selectedDiv2 = '#selectedId5'; 
    } 
    if (q === 5) { 
     selectedDiv = '#selectedId5'; 
     selectedDiv2 = '#selectedId6'; 
    } 

    $(selectedDiv).change(function() { 

     if (q == 1) { 
      var pullDownDivs = '#2'; 
     } 
     if (q == 2) { 
      var pullDownDivs = '#3'; 
     } 
     if (q == 3) { 
      var pullDownDivs = '#4'; 
     } 

     if (dropDownSelectJoined != null) { 
      var dropDownSelectJoined = dropDownSelectJoined + ", " + $(selectedDiv).val(); 
     } 
     else { 
      var dropDownSelectJoined = $(selectedDiv).val(); 
     } 


     var SelArea = $(selectedDiv).val(); 
     if (SelArea != 0) { 
      var url = '@Url.Action("NetworkSubForm")'; 
      q++; 
      $.post(url, { RemovedAreaId: $('#RemovedAreaId').val(), selectedNetworkId: $('#SelectedNetworkId').val(), dropDownSelectJoined: dropDownSelectJoined }, 
      function (data) { 
       var productDropdown = $(selectedDiv2); 
       productDropdown.empty(); 
       productDropdown.append("<option>-- Select Area --</option>"); 
       for (var i = 0; i < data.length; i++) { 
        productDropdown.append($('<option></option>').val(data[i].Value).html(data[i].Text)); 
       } 
      }); 
      $(pullDownDivs).show(); 
      $(pullDownDivs).html(); 
     } 
     else { 
      $(pullDownDivs).hide(); 
      $(pullDownDivs).html(); 
     } 
    }); 

Answer 1

Я не знаю, что остальная часть кода выглядит, но вы можете увидеть этот вид поведения из-за «слежки»:

var q = 0; //global "q" 
function handler() { 
    var q = 0; //local "q" that shadows the global "q"; 

    ... 
    ... 

    q++; 
    console.log(q); 
} 

Многократно вызова handler выведет на экран 1 каждый раз так как вы переопределяете локальный q в пределах handler. Однако внешний q остается неизменным. Но если вы сделали это:

var q = 0; //global "q" 
function handler() { 
    var q = 0; //local "q" that shadows the global "q"; 

    ... 
    ... 

    window.q++; 
    console.log(window.q); 
} 

Глобальный q будет обновляться, так как вы явно ссылаться на него, делая window.q.