jQuery навигационные слайды

Question

У меня есть слайдер div, который отлично работает, но я хочу, чтобы навигация показывала текущий активный слайд, и если вы нажмете на ссылку, то увидите слайд, на который вы нажали. Моя проблема заключается в том, что всякий раз, когда я нажимаю ссылку на навигационную страницу, моя страница становится неактуальной, и мне нужно закрыть вкладку и снова открыть сайт. Я пробовал ее во многих браузерах, и он делает то же самое. Что-то пошло не так, когда я добавил «navSlides» в событие click. Может кто-нибудь объяснить мне, что мне нужно сделать, чтобы заставить его работать? Благодаря !

Вот мой JSFIDDLE

contentSlides = $('.slide-wrapper'); 
    navSlides = $('#slide-nav > ul > li > a'); 
    slidesLeng = contentSlides.length - 1; 
    index = 0; 

    for (i = 0; i <= slidesLeng; i++) { 
     $(contentSlides[i]).addClass('slide-' + i); 
     $(navSlides[i]).addClass('slide-' + i); 
    }  

    $('div.slide-wrapper > span').on('mouseover', function() { 
     $(this).css({ 'font-size': '40px' }); 
    }); 

    $('div.slide-wrapper > span').on('mouseout', function() { 
     $(this).css({ 'font-size': '50px' }); 
    }); 


    $('.next').on('click', function() { 
     if (index != slidesLeng) { 
      $(contentSlides[index]).fadeOut(400, function() { 
       $(this).removeClass('active'); 
       $(navSlides[index]).removeClass('active'); 
       index++; 
       $(contentSlides[index]).fadeIn(400).addClass('active'); 
       $(navSlides[index]).addClass('active'); 
      }); 
     } 
    }); 

    $('.prev').on('click', function() { 
     if (index != 0) { 
      $(contentSlides[index]).fadeOut(400, function() { 
       $(this).removeClass('active'); 
       $(navSlides[index]).removeClass('active'); 
       index--; 
       $(contentSlides[index]).fadeIn(400).addClass('active'); 
       $(navSlides[index]).addClass('active'); 
      }); 
     } 
    }); 

    $(navSlides).on('click', function() { 
     var slideClass = $(this).attr('class'); 

     $(contentSlides[index]).fadeOut(400, function() { 
      $(this).removeClass('active'); 
      index = 0; 
      while (slideClass != $(contentSlides[index]).attr('class') || index<=slidesLeng) { 
       index++; 
      } 
      contentSlides[index].fadeIn(400).addClass('active'); 
     });  
    }); 

Answer 1

Вопрос заключается в том, что while цикл в обработчик щелчка никогда не выйдет. Выражение slideClass != $(contentSlides[index]).attr('class') || index<=slidesLeng всегда верно, поскольку сравнение выполняется между свойством класса для каждого элемента. Они не будут одинаковыми, поскольку в слайдах контента есть дополнительные классы, например slide-wrapper.

Таким образом, свойство класса первого слайда будет "slide-wrapper active slide-0", но свойство класса первой ссылки будет только "slide-0".

Это может быть исправлено с помощью jQuery index function, чтобы получить индекс элемента, а не пытаться сопоставить классы. Рабочая версия обработчика кликов выглядит следующим образом. Обновленная рабочая версия JSFiddle находится здесь: http://jsfiddle.net/kbkkg4ev/.

$(navSlides).on('click', function() { 
    var slideIndex = navSlides.index(this); 

    $(navSlides).removeClass('active') 
    $(this).addClass('active'); 

    $(contentSlides[index]).fadeOut(400, function() { 
     index = slideIndex; 
     $(this).removeClass('active'); 
     $(contentSlides[index]).fadeIn(400).addClass('active'); 
    }); 
});