Question

我可以得到一些帮助，因为我已经被困了几个小时吗？

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

<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)');
}));

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

2 个答案: