Question

背景/一般问题

我正在尝试修复一个朋友的网站，其中添加了两个jQuery插件并不好玩。基本上，一个（foundation - 带有制表符的网格布局）与第二个（RoyalSlider - 图像滑块）的效果不佳，因为后者需要“看到”滑块材料而前者隐藏非活动标签。有问题的页面有三个选项卡，每个选项卡上都有一个RoyalSliders。

原始代码在主页面上的某个jQuery中立即初始化了三个选项卡中每个选项卡的滑块。我一直试图通过仅初始化活动选项卡来修复它，然后，当单击选项卡时，插入代码以删除上一个滑块实例并为新选项卡创建一个新实例。

具体问题

我添加的 $(currentLocation).royalSlider('destroy') 行没有做任何事情，我无法弄清楚我做错了什么。现在，滑块正在初次正确初始化，但是当我回到任何选项卡时，第一个滑块出现在第一个滑块内，让我觉得删除功能不起作用;它的大小较小，动画与滑块应该设置的不同（反弹可能？）。这个数字永远不会超过两个。

代码

以下是我正在处理的代码片段。我只是为开发人员提供了一些小部件（虽然很容易检查源代码）。首先是一些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：

产品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()，$mySlider.royalSlider('destroy')，$(pastLocation).destroy()，$(pastLocation).royalSlider('destroy')，$(pastLocation).royalSlider.prototype('destroy')，在删除之前设置$('.royalslider).css('display','block')，以及我能做的任何其他事情想出来;所有这些都没有做任何事情（我正在观察变量royalSlider，而在Firebug中踩过它）或打破了网页。我是jQuery的新手，所以完全有可能答案非常简单，我只是错过了它。

非常感谢任何帮助！

如果还需要其他信息，请告诉我。

Answer 1

大多数jQuery插件将其对象的新实例存储在jQuery数据中。我认为是皇家滑块代码 - http://dimsemenov.com/plugins/royal-slider/ - 我认为你可以通过直接引用royalSlider对象来销毁它。

首先，您要检查并查看您尝试调用的元素是否实际上具有royalSlider实例。

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

假设上面的行返回一个对象，那么你应该能够直接访问destroy方法。如果它没有返回一个对象，那么你要么在错误的元素上调用destroy，要么其他东西正在吹掉存储的实例。

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

我在royalSlider网站上通过在我的控制台中键入以下内容对此进行了测试

$('#homeSlider').data('royalSlider').destroy();

无法获得jQuery UI插件的destroy（）方法（+冲突的jQuery插件）

背景/一般问题

具体问题

代码

1 个答案: