Jquery 将flex活动类添加到li而不是a/img

当我们启用

controlNav

时，我们会得到很好的分页列表和一些有用的类，比如

flex-active

。但是添加到链接或图像的类（启用缩略图控件时）。像这样：

<ol class="flex-control-nav">
    <li><a class="flex-active">1</a></li>
    <li><a>1</a></li>
</ol>

<ol class="flex-control-nav">
    <li class="flex-active"><a>1</a></li>
    <li><a>1</a></li>
</ol>

---

请提供您正在使用的jQuery以获得更精确的答案，但是您可以使用类似的东西吗

$('.clients-items').flexslider({
    animation: 'slide',
    controlNav: 'thumbnails',
    directionNav: false,
    start: function(){
        $('.flex-control-nav .flex-active').parent('li').addClass('flex-active').siblings().removeClass('flex‌​-active');
    },
    after: function(){
        $('.flex-control-nav .flex-active').parent('li').addClass('flex-active').siblings().removeClass('flex‌​-active');
    }
});

---

我认为最简单的方法是使用

.parent('li');

大概是

jQuery('.flex-control-nav').find('a.flex-active')
    .removeClass('flex-active')   // remove the class from the a
    .parent('li')                 // select the parent of the a,.. li that is.
    .addClass('flex-active');     // add the flex-active class to the parent li.

---

我找到了这个解决方案，它对我来说很有效

start: function() {
         //-- Add flexslider active class to li of nav control instead of just on the image
         if ($('.testimonial-section .flexslider ol.flex-control-nav').length > 0) {
             // initial check and addition
             $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() {
                 if ($(this).children('img').hasClass('flex-active')) {
                     $(this).children('img').removeClass('flex-active');
                     $(this).addClass('flex-active');
                 } else {
                     $(this).removeClass('flex-active');
                 }
             });
             // bind into flexslider callback and run dynamically
             $('.testimonial-section .flexslider').bind('start', function(event, slider) {
                 $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() {
                     if ($(this).children('img').hasClass('flex-active')) {
                         $(this).children('img').removeClass('flex-active');
                         $(this).addClass('flex-active');
                     } else {
                         $(this).removeClass('flex-active');
                     }
                 });
             });
         }
     },
     after: function() {
         //-- Add flexslider active class to li of nav control instead of just on the image
         if ($('.testimonial-section .flexslider ol.flex-control-nav').length > 0) {
             // initial check and addition
             $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() {
                 if ($(this).children('img').hasClass('flex-active')) {
                     $(this).children('img').removeClass('flex-active');
                     $(this).addClass('flex-active');
                 } else {
                     $(this).removeClass('flex-active');
                 }
             });
             // bind into flexslider callback and run dynamically
             $('.testimonial-section .flexslider').bind('after', function(event, slider) {
                 $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() {
                     if ($(this).children('img').hasClass('flex-active')) {
                         $(this).children('img').removeClass('flex-active');
                         $(this).addClass('flex-active');
                     } else {
                         $(this).removeClass('flex-active');
                     }
                 });
             });
         }
     }

---

我的最新答案有帮助吗？请告诉我哪里出了问题，以便我能更好地理解并修复它：）仅供参考，幻灯片会自动更改，flex活动类也会移动到另一个活动幻灯片。因此，我认为它也与改变幻灯片事件有关，我认为这是行不通的：）请也尝试一下滑块。你能把你的代码放在JSFIDLE中吗？我缺乏足够的想象力将问题弄得足够精确，现在看来我们离得更近了吗？：）

start: function() {
         //-- Add flexslider active class to li of nav control instead of just on the image
         if ($('.testimonial-section .flexslider ol.flex-control-nav').length > 0) {
             // initial check and addition
             $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() {
                 if ($(this).children('img').hasClass('flex-active')) {
                     $(this).children('img').removeClass('flex-active');
                     $(this).addClass('flex-active');
                 } else {
                     $(this).removeClass('flex-active');
                 }
             });
             // bind into flexslider callback and run dynamically
             $('.testimonial-section .flexslider').bind('start', function(event, slider) {
                 $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() {
                     if ($(this).children('img').hasClass('flex-active')) {
                         $(this).children('img').removeClass('flex-active');
                         $(this).addClass('flex-active');
                     } else {
                         $(this).removeClass('flex-active');
                     }
                 });
             });
         }
     },
     after: function() {
         //-- Add flexslider active class to li of nav control instead of just on the image
         if ($('.testimonial-section .flexslider ol.flex-control-nav').length > 0) {
             // initial check and addition
             $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() {
                 if ($(this).children('img').hasClass('flex-active')) {
                     $(this).children('img').removeClass('flex-active');
                     $(this).addClass('flex-active');
                 } else {
                     $(this).removeClass('flex-active');
                 }
             });
             // bind into flexslider callback and run dynamically
             $('.testimonial-section .flexslider').bind('after', function(event, slider) {
                 $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() {
                     if ($(this).children('img').hasClass('flex-active')) {
                         $(this).children('img').removeClass('flex-active');
                         $(this).addClass('flex-active');
                     } else {
                         $(this).removeClass('flex-active');
                     }
                 });
             });
         }
     }

start: function(){
    $('.flex-control-nav .flex-active').parent('li').addClass('flex-active').siblings().removeClass('flex‌​-active');
},
after: function(){
    $('.flex-control-nav li').removeClass('flex-active');
    $('.flex-control-nav .flex-active').parent('li').addClass('flex-active').siblings().removeClass('flex‌​-active');
}