Question

所以我有一个带有搜索框，复选标记和加载微调器的页面。当用户专注于搜索框时，微调器会淡入。用户在搜索框上取消焦点，微调器淡出。我有一个功能，用户在搜索框中按Enter键后切换复选标记，但是，我希望复选标记永远保持可见。截至目前，当用户按下回车键时，它会切换勾选标记并很快淡出，因为会自动调用非聚焦功能。

切换复选标记功能：

$('#searchText').on('keypress', function (e) {
    if (e.which === 13) {
        var val = $('#searchText').val();
        $('.circle-loader').toggleClass('load-complete');
        $('.checkmark').toggle();

        alert(val);
        return false;
    }
});

淡入淡出功能：

$(function () {
    $('#searchText').focusin(function () {
        $('#check').fadeIn();

    }).focusout(function () {
        $('#check').fadeOut();
    });
});

当用户在搜索框中按Enter键时，如何覆盖淡入和淡出功能（或者重写此功能）以停止？

提前致谢。

Answer 1

使用jQuery .stop方法。在元素上调用.stop()时，会立即停止当前运行的动画（如果有）。例如，如果在调用.slideUp()时隐藏了.stop()元素，则元素现在仍将显示，但将是其先前高度的一小部分。不调用回调函数。

https://api.jquery.com/stop/

Answer 2

我会用布尔值来表示是否已执行搜索。请参阅下面的示例。在不知道代码结构的情况下，我将其设置为全局，但可以更改为检查特定对象。

切换复选标记功能：

var searchPerformed = false;
$('#searchText').on('keypress', function (e) {
    if (e.which === 13) {
        searchPerformed = true;
        var val = $('#searchText').val();
        $('.circle-loader').toggleClass('load-complete');
        $('.checkmark').toggle();

        alert(val);
        return false;
    }
});

淡入淡出功能：

$(function () {
    $('#searchText').focusin(function () {
        $('#check').fadeIn();

    }).focusout(function () {
        if (!searchPerformed)
            $('#check').fadeOut();
    });
});

Answer 3

已修复

  $('#searchText').unbind("focusin");
  $('#searchText').unbind("focusout");

切换复选标记功能中的

。感谢大家的替代方法，将来会很方便。

如何在事件后稍微覆盖jQuery函数？

3 个答案: