Javascript hasClass不起作用

我正在研制一个导航系统，左右箭头都可以展开

<a href="#" class="icon-arrow-left active"></a>
     <ul>
        <li class="contracted"><a href="#">1</a></li>
        <li class="expanded"><a href="#">2</a></li>
        <li class="activeLesson"><a href="#">3</a></li>
        <li class="expanded"><a href="#">4</a></li>
        <li class="contracted"><a href="#">5</a></li>
    </ul>
<a href="#" class="icon icon-arrow-right active"></a>

这里是

您必须将if语句放在事件中，否则它只能在文档准备就绪时调用。

---

您必须将if语句放在事件中，否则它只能在文档准备就绪时调用。

将代码移到单击句柄中：

// Count Navigation quantity ==================================            
var count = $('.lessonNavigation li').length;

if (count > 4 && count <= 10) {
    $('.lessonNavigation li').attr('class', 'contracted');
    $('.lessonNavigation li:eq(0)').attr('class', 'expanded left');
    $('.lessonNavigation li:eq(1)').attr('class', 'activeLesson');
    $('.lessonNavigation li:eq(2)').attr('class', 'expanded right');
    $('.lessonNavigation li:eq(3)').attr('class', 'expanded');
}

// ========== Right and Left arrow functions ==================             
$('.arrowButton').find('.icon-arrow-right').click(function () {
    $('.lessonNavigation .expanded.left').attr('class', 'contracted');
    $('.lessonNavigation .activeLesson ').attr('class', 'expanded left');
    $('.lessonNavigation .expanded.right').attr('class', 'activeLesson');
    $('.lessonNavigation .activeLesson + li ').attr('class', 'expanded right');
});

$('.arrowButton').find('.icon-arrow-left').click(function () {
    $('.lessonNavigation .expanded.right').attr('class', 'contracted');
    $('.lessonNavigation .activeLesson ').attr('class', 'expanded right');
    $('.lessonNavigation .expanded.left').attr('class', 'activeLesson');
    $('.lessonNavigation .activeLesson').prev().attr('class', 'expanded left');

    if ($('li:first-child').hasClass('activeLesson')) {
        $('.icon-arrow-left').toggleClass('active inactive');
    }

});

//计数导航数量=
变量计数=$（'.lessonNavigation li'）.length；
如果（count>4&&count将代码移动到单击手柄内：

// Count Navigation quantity ==================================            
var count = $('.lessonNavigation li').length;

if (count > 4 && count <= 10) {
    $('.lessonNavigation li').attr('class', 'contracted');
    $('.lessonNavigation li:eq(0)').attr('class', 'expanded left');
    $('.lessonNavigation li:eq(1)').attr('class', 'activeLesson');
    $('.lessonNavigation li:eq(2)').attr('class', 'expanded right');
    $('.lessonNavigation li:eq(3)').attr('class', 'expanded');
}

// ========== Right and Left arrow functions ==================             
$('.arrowButton').find('.icon-arrow-right').click(function () {
    $('.lessonNavigation .expanded.left').attr('class', 'contracted');
    $('.lessonNavigation .activeLesson ').attr('class', 'expanded left');
    $('.lessonNavigation .expanded.right').attr('class', 'activeLesson');
    $('.lessonNavigation .activeLesson + li ').attr('class', 'expanded right');
});

$('.arrowButton').find('.icon-arrow-left').click(function () {
    $('.lessonNavigation .expanded.right').attr('class', 'contracted');
    $('.lessonNavigation .activeLesson ').attr('class', 'expanded right');
    $('.lessonNavigation .expanded.left').attr('class', 'activeLesson');
    $('.lessonNavigation .activeLesson').prev().attr('class', 'expanded left');

    if ($('li:first-child').hasClass('activeLesson')) {
        $('.icon-arrow-left').toggleClass('active inactive');
    }

});

//计数导航数量=
变量计数=$（'.lessonNavigation li'）.length；
如果（count>4&&count li:first child只获取第一个LIIF语句您的if语句只发生一次…当然它不起作用。您需要将其放在事件或事件调用的函数中。li:first child只获取第一个LIIF语句您的if语句只发生一次…当然它不起作用。您需要将其放入在事件上被调用的事件或函数的ide。
// Count Navigation quantity ==================================            
var count = $('.lessonNavigation li').length;

if (count > 4 && count <= 10) {
    $('.lessonNavigation li').attr('class', 'contracted');
    $('.lessonNavigation li:eq(0)').attr('class', 'expanded left');
    $('.lessonNavigation li:eq(1)').attr('class', 'activeLesson');
    $('.lessonNavigation li:eq(2)').attr('class', 'expanded right');
    $('.lessonNavigation li:eq(3)').attr('class', 'expanded');
}

// ========== Right and Left arrow functions ==================             
$('.arrowButton').find('.icon-arrow-right').click(function () {
    $('.lessonNavigation .expanded.left').attr('class', 'contracted');
    $('.lessonNavigation .activeLesson ').attr('class', 'expanded left');
    $('.lessonNavigation .expanded.right').attr('class', 'activeLesson');
    $('.lessonNavigation .activeLesson + li ').attr('class', 'expanded right');
});

$('.arrowButton').find('.icon-arrow-left').click(function () {
    $('.lessonNavigation .expanded.right').attr('class', 'contracted');
    $('.lessonNavigation .activeLesson ').attr('class', 'expanded right');
    $('.lessonNavigation .expanded.left').attr('class', 'activeLesson');
    $('.lessonNavigation .activeLesson').prev().attr('class', 'expanded left');

    if ($('li:first-child').hasClass('activeLesson')) {
        $('.icon-arrow-left').toggleClass('active inactive');
    }

});