Изменение между двумя полями по значению флажка

Question

Я создал небольшой скрипт для изменения переменной до двух разных идентификаторов полей.

var locationSelect = '#shipping_country_code'; 

function shippingColumn() { 
    $(locationSelect).change(function(){ 
     var location = $(this).val(); 
     $('.shipping_country_code').val(location); 
    }); 
} 
shippingColumn(); 

$('#order_shipping_same_as_billing').change(function() { 
    var checked = $(this).is(':checked'); 
    if (checked) { 
     locationSelect = '#country_code'; 
    } else { 
     locationSelect = '#shipping_country_code'; 
    } 
    shippingColumn(); 
}); 

Код работает, но есть одна проблема. Переменная по умолчанию установлена ​​в #shipping_country_code. Если флажок установлен, переменная изменяется на #country_code. Все идет нормально. Затем измените флажок еще раз, и по какой-то причине оба поля запускают изменение on для переменной locationSelect.

Может ли кто-нибудь увидеть причину, по которой это произойдет в моем коде?

Answer 1

Вы привязываете слушателя изменений к элементу. Этот слушатель по-прежнему будет связан, независимо от того, какие переменные вы меняете дальше по пути выполнения. Вам нужно отвязать прослушиватель, или связать с помощью jQuery's .one.

Обновление. Я понимаю, что .one не совсем то, что вам нужно. Он связывает слушателя с событием, которое будет запускаться только один раз, а затем отменять регистрацию. Вам нужно что-то, что может срабатывать несколько раз, и отменить регистрацию в зависимости от состояния. Чтобы иметь возможность отменить регистрацию события, важно, чтобы ссылка была на ту же самую функцию (а не только на идентичную), поэтому вы не можете определить обработчик события inline.

Пример, который отменяет регистрацию событий может выглядеть следующим образом:

function selectChange() { 
    var location = $(this).val(); 
    $('.shipping_country_code').val(location); 
} 

function shippingColumn() { 
    $('#shipping_country_code, #country_code').unbind('change', selectChange); 
    $(locationSelect).bind('change', selectChange); 
} 

Demo (я добавил класс активный для ясности).

Теперь. Легко потеряться при привязке и развязывании слушателей. Последнее, что вы хотите сделать (обычно), - это случайно зарегистрировать один и тот же прослушиватель дважды. Я бы предложил другой подход, который, как я думаю, приведет к меньшему количеству проблем по линии, где вы привязываете обработчики событий раз и навсегда, на DOMReady, что будет всегда огонь для и элементов, а затем вы используете изменение прослушиватель, чтобы проверить вашу переменную состояния и посмотреть, нужно ли обрабатывать событие или нет.

$('#shipping_country_code, #country_code').change(function() { 
    if(!$(this).is(locationSelect)) return; 
    var location = $(this).val(); 
    $('.shipping_country_code').val(location); 
}); 

Demo

Вы заметите, что для случая использования вы не действительно должен использовать переменное состояние с помощью этого решения; это почти так же легко оценить, следует ли обрабатывать текущее событие, как это происходит:

$('#shipping_country_code, #country_code').change(function() { 
    var sameAsBilling = $('#order_shipping_same_as_billing').is(':checked'); 
    if((this.id == 'country_code' && !sameAsBilling) || 
     (this.id == 'shipping_country_code' && sameAsBilling)) return; 
    var location = $(this).val(); 
    $('.shipping_country_code').val(location); 
}); 

Demo

Логика внутри слушателя становится немного сложнее, но вся логика содержится в одном один слушатель, так что это может сделать код кода менее сложным для более крупного проекта.