5

背景/一般的な問題

彼が追加した2つのjQueryプラグインがうまく機能していない友人のWebサイトを修正しようとしています。基本的に、1つ（基礎-タブ付きのグリッドレイアウト）は2つ目（RoyalSlider-画像スライダー）ではうまく機能しません。後者はスライダーの素材を「見る」必要があり、前者は非アクティブなタブを非表示にするためです。問題のページには3つのタブがあり、それぞれにこれらのRoyalSlidersの1つがあります。

元のコードは、メインページのjQueryで3つのタブのそれぞれのスライダーをすぐに初期化しました。アクティブなタブのみを初期化し、タブがクリックされたときにコードを挿入して前のスライダーインスタンスを削除し、新しいタブ用に新しいインスタンスを作成することで修正しようとしています。

特定の問題

追加した $(currentLocation).royalSlider('destroy') 行は何もしておらず、何が間違っているのか理解できません。 現在、スライダーは初めて正しく初期化されていますが、いずれかのタブに戻ると、最初のスライダーの内側に2番目のスライダーが表示され、削除機能が機能していないように見えます。そのサイズは小さく、アニメーションはスライダーが設定されているはずのものとは異なります（おそらくバウンスしますか？）。数が2を超えることはありません。

コード

これが私が取り組んでいるコードのスニペットです。開発者に敬意を表して、小さな部分だけを含めました（ただし、ソースコードを確認するのは簡単です）。最初はRoyalSlider.jsの一部で、構造と破棄メソッドを示すためだけのものです（私はそれをまったく変更しておらず、かなり標準的なjQuery UIプラグインの形式になっています）：

RoyalSlider.js：

(function($) {
     function RoyalSlider(element, options){ /* Make a slideshow, basically */ }
     RoyalSlider.prototype = {
          ... /* methods */
          destroy:function(){
               this._stopSlideshow();
               this._dragContainer.unbind(this._downEvent);
               $(document).unbind(this._moveEvent).unbind(this._upEvent);
               $(window).unbind(this._resizeEvent);
               if(this.settings.keyboardNavEnabled) {
                    $(document).unbind("keydown.rs");
               }
               this.slider.remove();

               delete this.slider;
          }
          ... /* _internal methods; all above are defined */
     }; /* RoyalSlider.prototype end */
     
     $.fn.royalSlider = function(options) { /* basically return a new RoyalSlider */ };
     $.fn.royalSlider.defaults = { /* whole lot of defaults */ };
     $.fn.royalSlider.settings = {};
})(jQuery);

次に、タブを切り替えるapp.js。タブは順序付けられていないリストであり、タブをクリックするとhttp://domain.com/pagename#tabtwo（など）に移動します。

app.js

jQuery(document).ready(function ($) {
     function activateTab($tab) {
          var $activeTab = $tab.closest('dl').find('a.active'),
          contentLocation = $tab.attr("href") + 'Tab';

          prevLocation = $activeTab.attr("href") + 'Tab'; /* I added this */

          // Make Tab Active
      $activeTab.removeClass('active');
      $tab.addClass('active');
    
      //Delete and Add Slider

      $(prevLocation).royalSlider('destroy');  /* Doesn't Work, but doesn't break - it doesn't seem to have any effect.  */

      $mySlider = $(contentLocation).royalSlider({  /* I also added this, and it seems to work */
           captionShowEffects:"moveleft",
           directionNavAutoHide: true,
           imageScaleMode:"fit",
           imageAlignCenter:true,
           blockLinksOnDrag:true,   
      });

      //Show Tab Content
      $(contentLocation).closest('.tabs-content').children('li').hide();
      $(contentLocation).css('display', 'block');

     }
     /* More functions that aren't relevant for this */
}

最後に、HTMLドキュメント自体のjQueryは次のとおりです。

product-design.html

<html><head> ...
<script>
var $mySlider;
$(document).ready(function() {
    if ( window.location.hash ) { initialLocation = window.location.hash + 'Tab'; }
    else { initialLocation = '#taboneTab'; }
    
    $mySlider = $( initialLocation ).royalSlider({
        captionShowEffects:"moveleft",
        directionNavAutoHide: true,
        imageScaleMode:"fit",
        imageAlignCenter:true,
        blockLinksOnDrag:true,  
    });
    
    $(".royalSlider").css({ display: 'inline-block', overflow: 'hidden' });  
});
</script>
</head><body>
...
<!-- Body goes here -->
...
  <dl class="contained tabs">
    <dd><a href="#tabone" class="active">TabOne</a></dd>
    <dd><a href="#tabtwo" class="inactivetest">TabTwo</a></dd>
    <dd><a href="#tabthree" class="inactivetest">TabThree</a></dd>
  </dl>
  <ul class="tabs-content">
    <li class="active" id="taboneTab">
      ...
      <div id="tabone" class="royalSlider default"> 
        <!-- Container of slides(images) -->
        <ul class="royalSlidesContainer">
          <!-- Slides -->
          <li class="royalSlide">
            <div class="orbitcontent" style="">
              <h3>Content One</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </li>
          <li class="royalSlide"> <img class="royalImage" src="" alt="Beauty Shot" width="765" height="600"/>
            <div class="royalCaption">
              <h4 class="royalCaptionItem" data-show-effect="movetop">Constructed Prototype</h4>
            </div>
          </li>
        </ul>
      </div>
      
    <!--TAB TWOOOOOOOOOOOO-->
    <li id="tabtwoTab">
    ...
    <!--TAB THREEEEEEEEEEE-->
    <li id="tabthreeTab">
    ...
    <!-- Close all of the tags -->

すべてのテキストと完全なコードの欠如について本当に申し訳ありませんが、誰かが何か提案がありますか？削除する直前に、、、、、、設定を試しましたが、$mySlider.destroy()他に思いついたものは何でもあります。それらはすべて何もしなかったか（Firebugでステップスルーしているときに変数royalSliderを見ていました）、またはWebページを壊しました。私はjQueryの初心者なので、答えが非常に単純である可能性があり、それが欠けているだけです。$mySlider.royalSlider('destroy')$(pastLocation).destroy()$(pastLocation).royalSlider('destroy')$(pastLocation).royalSlider.prototype('destroy')$('.royalslider).css('display','block')

どんな助けでも大歓迎です！

他に必要な情報があれば教えてください。

4

1 に答える 1

1

ほとんどの jQuery プラグインは、オブジェクトの新しいインスタンスを jQuery データ内に保存します。ロイヤル スライダー コードと思われるもの ( http://dimsemenov.com/plugins/royal-slider/ ) を調べてみましたが、royalSlider オブジェクトを直接参照することで破棄できると思います。

まず、destroy を呼び出そうとしている要素に実際に RoyalSlider インスタンスがあるかどうかを確認します。

console.log($(prevLocation).data('royalSlider'));

上記の行がオブジェクトを返すと仮定すると、destroy メソッドに直接アクセスできるはずです。オブジェクトが返されない場合は、間違った要素で destroy を呼び出しているか、他の何かが格納されたインスタンスを吹き飛ばしています。

$(prevLocation).data('royalSlider').destroy();

コンソールに次のように入力して、royalSlider Web サイトでこれをテストしました

$('#homeSlider').data('royalSlider').destroy();
于 2013-08-22T20:13:45.740 に答える