Выбор: последний-ребенок с использованием jquery

Question

У меня есть карусель, и каждый якорь в области меню связан с выбранным слайдом, и когда выбран анкер в меню, он получает класс .active. Ex: link 1 = slide 1. Я попытался добавить кнопку остановки вместо следующей, когда карусель дойдет до последнего ползунка.

<nav class="meniu"> 
    <a href="#">Slide 1</a> 
    <a href="#">Slide 2</a> 
    <a href="#">Slide 3</a> 
</nav> 
<div id="slider"> 
    <ul> 
     <li>Slide 1</li> 
     <li>Slide 2</li> 
     <li>Slide 3</li> 
    </ul> 
</div> 

Это скрипт, который я пытался добавить

if ($('.meniu a:last-child').hasClass('active')){ 
    //change button arrow to stop sign 
} 

Вот скрипка - http://jsfiddle.net/G7P46/1/

Answer 1

Хорошо, так вот ваша проблема.

При использовании кнопок «назад» и «вперед» вы получаете элемент с «активным» классом и удаляете класс, а затем добавляете его следующему родному брату. Вот проблема. Если вы используете только кнопки, ни один якорь никогда не становится активным. Таким образом, селектор jquery ищет активные значения 0. Нет «следующего», поэтому он не может проверить, активен ли последний элемент.

Теперь, если вы нажмете на ссылку, ТОГДА используйте кнопки, это работает, потому что по крайней мере один якорь установлен на «активный».

Здесь находится рабочая скрипка.

http://jsfiddle.net/G7P46/2/

Я обновил функцию gonext

function goNext() { 
    if (decount != counter) { 
     $('#slider ul').animate({ 
      left: '-=' + $('#slider').width() 
     }, 800, 'swing', function() { 

     }); 
     if ($('.active').length == 0) { 
      $('.meniu a:first-child').addClass('active'); 
     } 
     $('.active').removeClass('active').next().addClass('active'); 
     if ($('.meniu a:last-child').hasClass('active')) { 
      console.log('change button'); 
     } 

     decount++; 
     window.location.hash = decount; 

    } 
} 

Обратите внимание, что я добавляю чек, чтобы увидеть, если есть какой-либо якорь установлен активные. Если нет, я устанавливаю первого ребенка активным. Я также добавил оператор изменения, если оператор. Теперь он попадает.

Кроме того, я обновил событие щелчка

$('.meniu a').on('click', function() { 
    var goTo = this.id * -$('#slider').width() + $('#slider').width(); 
    $('#slider ul').animate({ 
     left: goTo 
    }, 800, 'swing', function() {}); 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
    decount = this.id; 
    window.location.hash = this.id; 
    if ($('.meniu a:last-child').hasClass('active')) { 
     console.log('change button'); 
    } 


}); 

Теперь проверяет последний якорь там.

Edit: я обновил скрипку снова иметь фактическую кнопку меняющегося functionanlity

http://jsfiddle.net/G7P46/3/

Answer 2

попробовать это:

if ($('.meniu a:last').hasClass('active')){ 
    //change button arrow to stop sign 
} 

Я надеюсь, что это поможет.