Question

所以我有两个时间字段timeFrom和timeTo。我想要做的是，如果时差等于或大于2，请将标签向下滑动。但我无法弄清楚我在这里做错了什么。这是我的代码：

$(document).ready(function() {
    $("#timeTo").change(function()) {
        var timeTo = $("#timeTo").val();
        var timeFrom = $("#timeFrom").val();
        var diff = timeTo - timeFrom;
        if (diff >= 2){
            $("#cost_label").slideDown();
        }
        else{
             $("#cost_label").slideUp();
        }
    });
    $("#cost_label").hide();
    $("#timeTo").trigger("change");
});

Answer 1

尝试

$(document).ready(function () {
    $("#timeTo").on('input', function () {
        var timeTo = $("#timeTo").val();
        var timeFrom = $("#timeFrom").val();
        var diff = parseFloat(timeTo) - parseFloat(timeFrom);
        alert(diff);
        if (diff >= 2) {
            $("#cost_label").slideDown({
                complete: function () {
                    $("#cost_label").hide();
                }
            });
        } else {
            $("#cost_label").slideUp({
                complete: function () {
                    $("#cost_label").hide();
                }
            });
        }
    });
});

您的标签将在动画完成时隐藏，因此不会立即隐藏
字符串读为整数，因为您无法减去字符串
on('input')代替on(change)，这是检测文本字段更改的正确方法
在匿名函数声明后删除了括号，这是语法错误;）

您可以随时调试问题并使用逻辑来解决这些问题。

Somewhat-working Demo

Answer 2

如果您使用+输入且具有合理的最小/最大限制，则可能不需要Math.abs来进行类型转换，并且可能不需要type="number"。当一个键从下到上位置时，'keyup'事件将触发，因此您不需要对输入框进行非聚焦（单击或标签离开）。您也可以使用'keydown'，如果您太急于等待，并且不介意当用户在键盘上睡着时每14毫秒触发一次。使用$ .on代替事件命名方法，以便您可以侦听多个事件（作为空格分隔列表）并在两个输入上侦听事件（选择器需要以逗号分隔的列表）。

$(function(){
    $('#cost_label').hide();
    $('#timeFrom,#timeTo').on('keyup change', timeChange);
    function timeChange(){
        var from = +$('#timeFrom').val();
        var to = +$('#timeTo').val();
        if(Math.abs(to - from) >= 2)
            $('#cost_label').slideDown();
        else $('#cost_label').slideUp();
    }
    timeChange();
});

http://jsfiddle.net/LDB5X/使用input type="text"

http://jsfiddle.net/6M5V6/使用input type="number"（可能无法在所有浏览器中使用）

这个'输入'事件是什么？我在jquery docs

中找不到它

根据时差向下滑动标签

2 个答案: