5

背景/一般问题

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

原始代码立即在主页上的一些 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（等）

应用程序.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：

产品设计.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')，以及我能想到的其他任何东西；所有这些要么什么都不做（我在 Firebug 中逐步浏览变量时正在观看变量 royalSlider）或破坏了网页。我是 jQuery 的新手，所以答案很可能很简单，我只是想念它。

任何帮助将不胜感激！

让我知道是否需要其他信息。

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 网站上对此进行了测试

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