2

ホームページに画像カルーセルがあります。それをレンダリングするには、Jquerytools ( scrollable+navigator ) を使用します

この方法で jQuery 初期化スクリプトをトリガーします。

$(window).load(function(){
   $("#today-news-carousel").scrollable({ vertical: true, mousewheel: true }).navigator({ navi: '#today-news-navigator' });

 });

このカルーセルのコンテンツは、AJAX 呼び出しによって更新できます。この呼び出しの後、このカルーセルを再初期化する必要があります。AJAX 呼び出しを行う関数は次のとおりです。

  $(document).on('click', '.nav-highlight', function() {

      var requestDateArray = $(this).attr('data-thedate').split('-');
      var d = new Date();
      var requestedDate = new Date(requestDateArray[0], (requestDateArray[1]-1), requestDateArray[2]);
      var today = new Date(d.getFullYear(), d.getMonth(), d.getDate());
      if (requestedDate > today) {
          return
      }else {
        $.ajax({
          type: "POST",
          url: templateDir+'/highlight-news-navigator.php',
          context: this,
          dataType: "html",
          data: { date: $(this).attr('data-thedate') },
          beforeSend: function(){ 
          },
          success: function(data) {
            $('.today-news').fadeOut('fast', function(){
              $(this).empty().html(data).fadeIn('fast');
            });
          },
          complete: function(){
            $("#today-news-carousel").scrollable({ vertical: true, mousewheel: true })
            .navigator({ navi: '#today-news-navigator' });   
          }
        });

      }

  });

「完全な」コールバック関数で、プラグインを再初期化しようとしましたが、コンソールに次のエラーが表示されました:

TypeError: $(...).scrollable(...).navigator is not a function
.navigator({ navi: '#today-news-navigator' });

ページを読み込んだときに正しく動作する理由がわかりません。再初期化すると、.navigator メソッドが見つからないようです...

4

1 に答える 1

1

アーチャーの助けを借りて、解決策を見つけました。プラグインを再初期化するスクリプトは、fadeIn() コールバックに配置する必要がありました。ここで作業コード：

  $(document).on('click', '.nav-highlight', function() {

      var requestDateArray = $(this).attr('data-thedate').split('-');
      var d = new Date();
      var requestedDate = new Date(requestDateArray[0], (requestDateArray[1]-1), requestDateArray[2]);
      var today = new Date(d.getFullYear(), d.getMonth(), d.getDate());
      if (requestedDate > today) {
          return
      }else {
        $.ajax({
          type: "POST",
          url: templateDir+'/highlight-news-navigator.php',
          context: this,
          dataType: "html",
          data: { date: $(this).attr('data-thedate') },
          beforeSend: function(){ 
          },
          success: function(data) {
            $('.today-news').fadeOut('fast', function(){
              $(this).empty().html(data).fadeIn('fast', function(){
                $("#today-news-carousel").scrollable({ vertical: true, mousewheel: true }).navigator({ navi: '#today-news-navigator' });   
              });
            });
          },
        });

      }

  });
于 2013-10-04T15:36:19.147 に答える