仅在多个文本输入发生更改时才尝试触发更改事件

Question

我有两个文本输入字段（实际上是 jQuery UI 日期选择器的输入）和一个选择字段。代码是：

<input type="text" id="datepickerStart" name="datepickerStart" placeholder="Start hire"/>
<input type="text" id="datepickerEnd" name="datePickerEnd" placeholder="End hire"/>
<select name="hireQuantity" id="hireQuantity">

我正在尝试更改选择的背景颜色，只有当两个文本输入都触发了它们的更改事件时。当任何一个输入发生变化时，我尝试的每个解决方案都会发生变化。我试过条件语句.add()，但我没有想法。这是我最基本的代码尝试，有什么建议吗？

$('#datepickerStart', '#datepickerEnd').change(function() { $('#hireQuantity').css('background','rgb(249,237,50)'); });//end change

Answer 1

在更改时添加一个类（或使用 data() 或其他）并检查两个元素是否具有该类，如果有，则选择器的长度为 2，只需确保 DOM 中没有其他元素，但两个日期选择器不小心拥有相同的类

$('#datepickerStart', '#datepickerEnd').change(function() {
    $(this).addClass('changed');

    if ($('.changed').length == 2)
        $('#hireQuantity').css('background','rgb(249,237,50)');
});

Answer 2

我有一个 jsfiddle 以稍微不同的方式处理这个问题。

HTML：

<input class="datepicker" type="text" id="datepickerStart" name="datepickerStart" placeholder="Start hire" />
<input class="datepicker" type="text" id="datepickerEnd" name="datePickerEnd" placeholder="End hire" />
<select name="hireQuantity" id="hireQuantity"></select>

JavaScript：

function clickHandler (count, cb) {
    var changed;
    changed = [];
    return function (e) {
        if (-1 === changed.indexOf(e.currentTarget)) {
            changed.push(e.currentTarget);
            if (0 < count) {
                cb.apply(this, arguments);
            } else {
                count += 1;
            }
        }
    }
}
$('.datepicker').change(clickHandler(0, function () {
    $('#hireQuantity').css('background','rgb(249,237,50)');
}));