Question

我创建了一个小脚本来将变量更改为两个不同的字段ID。

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。到现在为止还挺好。然后再次更改复选框，由于某种原因，两个字段都会触发变量locationSelect的开启更改。

任何人都可以在我的代码中看到这种情况发生的原因吗？

Answer 1

您正在将更改侦听器绑定到元素。无论您在执行路径中进一步更改哪些变量，该侦听器仍将受到约束。您需要解除侦听器的绑定，~~或使用jQuery的.one进行绑定。~~

<强>更新即可。我意识到.one并不完全是你所需要的。它将侦听器绑定到仅触发一次然后取消注册的事件。您需要可能会多次触发的内容，并根据状态取消注册。为了能够取消注册事件，重要的是引用是相同的函数（而不仅仅是相同的函数），因此您无法内联定义事件处理程序。

取消注册事件的示例可能如下所示：

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

侦听器内部的逻辑变得有点复杂，但所有逻辑都包含在一个侦听器中，因此可能会使整个代码在较大的项目中不那么复杂。

在复选框值上的两个字段之间切换

1 个答案: