hasClass不起作用

我正在使用左右箭頭展開LI的導航系統。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 ($('li:first-child').hasClass('activeLesson')) { 
     $('.icon-arrow-left').attr('class','inactive') 
     }

這裏是jsFiddle

來源

2014-04-22 SM Sadiq

李：拳頭孩子只得到第一個李 –

你的if語句只會發生一次....當然是不去上班。您需要將其放置在事件或事件調用的事件或函數內部。 –

http://jsfiddle.net/xhP74/2/

$('.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'); 
    } 
});

你要發生的事件裏面的if語句，否則它只是變得呼籲文件準備好。

來源

2014-04-22 22:53:07

移動你的代碼中的點擊手柄內：

// 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'); 
    } 

});

http://jsfiddle.net/xhP74/3/

來源

2014-04-22 22:53:42 turtlepick

hasClass不起作用

回答

相關問題