0

クラス「flex-active-slide」をアクティブに動的に追加するスライダー（flexslider）があります<li>。

特定のスライドに「flex-active-slide」というクラスがある場合、jQuery を使用して何かを実行したいと考えています。私は次のことを試しましたが、.flex-active-class が既に実行された後にオンザフライで追加されるため、機能しません。

if ( $('#slider li.about').is('.flex-active-slide')  ){  
   $('.nav li.about').show();
}

私の調査では、on() を使用したいようですが、私が目にするすべての例は、それを click() や hover() などのイベントに関連付けています。これは、そのようなものによってトリガーされるのではなく、クラスが「現れる」だけです。フォーマットの仕方がわかりません。このようなもの...？

$(document).on('???',".flex-active-slide",  function() {
    $(".nav li.about").show();;
    })

私は恥ずかしいほど間違っていると確信しています.あなたが与えることができる助けに感謝します!!

注: 影響を与えようとしている .nav はスライダー div とはまったく関係がないため、単純に CSS を使用することはできません。

更新: これは、flex-active-slide クラスの追加を制御する flexslider.js のコードと思われるものです。私にできることを示唆するものはここにありますか？

 slider.flexAnimate = function(target, pause, override, withSync, fromNav) {

      if (asNav && slider.pagingCount === 1) slider.direction = (slider.currentItem < target) ? "next" : "prev";

      if (!slider.animating && (slider.canAdvance(target, fromNav) || override) && slider.is(":visible")) {
        if (asNav && withSync) {
          var master = $(vars.asNavFor).data('flexslider');
          slider.atEnd = target === 0 || target === slider.count - 1;
          master.flexAnimate(target, true, false, true, fromNav);
          slider.direction = (slider.currentItem < target) ? "next" : "prev";
          master.direction = slider.direction;

          if (Math.ceil((target + 1)/slider.visible) - 1 !== slider.currentSlide && target !== 0) {
            slider.currentItem = target;
            slider.slides.removeClass(namespace + "active-slide").eq(target).addClass(namespace + "active-slide");
            target = Math.floor(target/slider.visible);

          } else {
            slider.currentItem = target;
            slider.slides.removeClass(namespace + "active-slide").eq(target).addClass(namespace + "active-slide");
            return false;
          }
        }
...
4

5 に答える 5

2

力ずくの方法は、それをポーリングすることです。

var poll = function(){
  if ( $('#slider li.about').is('.flex-active-slide')  ){  
    $('.nav li.about').show();
  } else {
    setTimeout(poll,500); // Sets how often to check in milliseconds
  }
}

そのコードは要素を 0.5 秒ごとにチェックし続け、最初に要素を検出するとチェックを停止します。ページが開いているときはいつでも要素をチェックし続けたい場合は、else から setTimeout を取り出します。

それを行うよりスマートな方法は、コールバックを使用することです。Flexslider にはいくつかの異なるコールバックがあります。ここでは after コールバックを使用しています。これは、各スライドのアニメーション後に実行されます。

$(document).ready(function() {
  $('.flexslider').flexslider({
    after: function(slider) {
      if($('#slider li.about').is('.flex-active-slide')) {
        $('.nav li.about').show();
      }
    }
  });
});

これを正しい要素で呼び出す必要があります。を使用して.flexsliderいますが、flexslider インスタンスの識別子を指定する必要があります。

3 番目のスライドの後に show() イベントをトリガーするif($('#slider li.about').is('.flex-active-slide'))ようなものに置き換えることができます。if(slider.currentSlide == 3)Flexslider のホームページの高度なセクションに、これに関する詳細が記載されています。http://www.woothemes.com/flexslider/

于 2013-08-15T02:42:03.220 に答える
0

jQuery をいじっても構わない場合は、jquery.hook プラグインを使用して、次のことを試すことができます。

$.hook('addClass');
$('#slider').delegate('onaddClass', function() {
    if ( $(this).hasClass('flex-active-slide') )
    {
        $(".nav li.about").show();
    }
});

ただし、完全な開示のために、私はこれを試していません。それがあなたのページのパフォーマンスに影響を与えるかどうかはわかりません:/これを試してみたら、どうなるか教えてください..

于 2013-08-15T01:59:56.020 に答える
0

flexslider スクリプトを編集するのが最も簡単な解決策です (私は Flexslider を自分で使用したことがないため)。flex-active-slide` クラスが切り替えられている行 (おそらく if else 句でもある) を見つけて、そこに関数を直接入力します。

ファイルを編集したくない場合は、古き良きsetInterval機能を使用する別の「パフォーマンス重視」の方法があります。次のようなものがあります。

setInterval(function() {
  if ( $('#slider li.about').hasClass('.flex-active-slide')  ){  
     $('.nav li.about').show();
  };
},200);

これにより、li.about にクラスがあるかどうかをチェックする関数が 200 ミリ秒ごとに起動されます。

これを行うための新しい方法もあります。これは webworkers と呼ばれ、基本的にはバックグラウンドで動作するスクリプトであり、遅いsetInterval(). まだ調査していませんが、かなり興味深いようです。MDN ドキュメントには、それに関する多くの情報が記載されています。

于 2013-08-15T02:45:35.860 に答える