Question

我无法找到.hasClass无效的原因。

我正在使用Quick Search jQuery插件，我的代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.quicksearch.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('input#id_search').quicksearch('div#booklist div.cover', {
            'show': function () {
                $(this).removeClass('hide').addClass('show');
            },
            'hide': function () {
                $(this).removeClass('show').addClass('hide');
            }
        });


    if ($('div#booklist div.cover').hasClass('hide')) {
        alert("Yay ! Its working now.");
    }

});// DOM ends here ..before editing it was above if statement.
</script>

如果有人在我的代码中发现错误，如果是，请告诉我。

即使我尝试了if ($('.hide').css('display') == 'none')这样的不同条件，但它仍无法正常工作。

控制台中没有错误，它也在添加hide类，并且有很多hide类。

HTML：

    <form action="#" id="searchform"><div><input autocomplete="off" type="text" name="s" class="search" id="id_search" placeholder="Enter here"/></div></form>

<div id="booklist">
    <h4>Title-1</h4>
    <div class="cover"><a href="link" rel="bookmark" /></a>Sub title</div>
    <div class="cover"><a href="link" rel="bookmark" /></a>Sub title</div>
    <div class="cover"><a href="link" rel="bookmark" /></a>Sub title</div>
    <div class="cover"><a href="link" rel="bookmark" /></a>Sub title</div>
    <div class="cover"><a href="link" rel="bookmark" /></a>Sub title</div>

    <h4>Title-2</h4>
    <div class="cover"><a href="link" rel="bookmark" /></a>Sub title</div>
    <div class="cover"><a href="link" rel="bookmark" /></a>Sub title</div>
    .
    .
    .
    .
</div>

Answer 1

您必须将代码放入$(document).ready回调中。现在，在将#booklist元素添加到DOM之前执行它。

Answer 2

当DOM准备就绪时，您应该调用jQuery条件，或者使用匿名函数激活它：

(function() {
     if ($('div#booklist div.cover').hasClass('hide')) {
         alert("Yay ! Its working now.");
     }
})();

如果条件不起作用，则为hasClass

2 个答案: