采取活动类并在其他div中复制

Question

我有一个使用jQuery.fullPage.js的幻灯片。我正在为各种幻灯片添加背景颜色，我试图从活动的任何幻灯片中获取背景颜色，并将其作为类添加到幻灯片的幻灯片控件中。

我这样做的jQuery是：

$('.controlArrow').on('click', function () {
      $('.slide').each(function () {
          if ($(this).hasClass('black', 'active')) {
              $('.black.active').closest('.section').children('.controlArrow').addClass('black').removeClass('gray');
          } else {
              if ($(this).hasClass('gray', 'active')) {
                  $('.gray.active').closest('.section').children('.controlArrow').addClass('gray').removeClass('black');
              }
          }

      });
  });

问题是添加到箭头的类实际上并不模仿活动幻灯片中的内容。如果我有：

<div class="slide black active">

我的幻灯片控件可能如下所示：

<div class="controlArrow prev gray"></div>

我也试过了：

 $('.controlArrow').click(function() {

但这似乎没有帮助。我有一种感觉，我的逻辑搞砸了，但我没有看到它。

我有fiddle here。

为了清晰起见，添加了一个屏幕截图。

Answer 1

尝试

jQuery(function ($) {
    var pepe = $.fn.fullpage({
        'css3': true,
        "verticalCentered": true
    });
    var colors = ['gray', 'black'], regex = new RegExp(colors.join('|'));
    $('.controlArrow').on('click', function () {
        var classes = $('.slide.active').prop('className');
        var color = classes.match(regex)[0];
        $('.controlArrow').removeClass(colors.join(' ')).addClass(color)
    });
});

演示：Fiddle

Answer 2

似乎它正在工作并将您想要的类添加到控件中。如果你试图将滑块的颜色放入控件中，你需要控制控件的边框颜色，而不是背景颜色，这就是你没有看到颜色变化的原因。