Question

我有一个在运行时切换CSS类的函数。

showSearchBar: function () {
    $searchBar.addClass('open');
    alert($searchBar.hasClass('open'));
    $searchBar.find('input[type="text"]').focus();
}

此简单函数引发警报，提示未添加open类。我也在浏览器中签入了，该类似乎根本没有添加。对象本身是可访问的，并且正在调用该函数。我也检查了CSS，并且该类存在。因此，基本上，我试图就如何更好地调试此问题提供提示。

全功能：

var $searchBar = $('.search-bar');
$.AdminBSB.search = {
    activate: function () {
        var _this = this;
        //Search button click event
        $('.js-search').on('click', function () {
            _this.showSearchBar();
        });

        //Close search click event
        $searchBar.find('.close-search').on('click', function () {
            _this.hideSearchBar();
        });

        //ESC key on pressed
        $searchBar.find('input[type="text"]').on('keyup', function (e) {
            if (e.keyCode == 27) {
                _this.hideSearchBar();
            }
        });
    },
    showSearchBar: function () {
        $searchBar.addClass('open');
        alert($searchBar);
        $searchBar.find('input[type="text"]').focus();
    },
    hideSearchBar: function () {
        $searchBar.removeClass('open');
        $searchBar.find('input[type="text"]').val('');
    }
}

对应的div

<div class="search-bar">
    <div class="search-icon">
        <i class="material-icons">search</i>
    </div>
    <input type="text" placeholder="START TYPING...">
    <div class="close-search">
        <i class="material-icons">close</i>
    </div>
</div>

显然，对象引用在那里。但是，如果我执行$searchBar.hasClass，它将始终返回false。

Answer 1

解决了。我只是添加了一个ID，而不是通过CSS搜索。

$.AdminBSB.search = {
activate: function () {
    var _this = this;

    //Search button click event
    $('.js-search').on('click', function () {
        _this.showSearchBar();
    });

    //Close search click event
    $('.close-search').on('click', function () {
        _this.hideSearchBar();
    });

    //ESC key on pressed
    $('#search-bar').find('input[type="text"]').on('keyup', function (e) {
        if (e.keyCode == 27) {
            _this.hideSearchBar();
        }
    });
},
showSearchBar: function () {
    $('#search-bar').addClass('open'); 
    $('#search-bar').find('input[type="text"]').focus();
},
hideSearchBar: function () {
    $('#search-bar').removeClass('open');
    $('#search-bar').find('input[type="text"]').val('');
}
}

已更新功能，以使用ID代替CSS类。

我仍然没有弄清楚为什么这个特定功能很难通过CSS类来查找元素。但是这种解决方法对我有用。

jQuery中的Addclass函数未添加类

1 个答案: