背景/一般问题
我正在尝试修复一个 friend 的网站，在该网站上他添加的两个jQuery插件效果不佳。基本上，一个(foundation-带有选项卡的网格布局)与第二个(RoyalSlider-图像滑块)不能很好地配合，因为后者需要“查看”滑块 Material ，而前者需要隐藏不事件的选项卡。所涉及的页面具有三个选项卡，每个选项卡上都包含这些RoyalSliders之一。
原始代码立即在主页上的某些jQuery中初始化了三个选项卡中每个选项卡的滑块。我一直试图通过仅初始化事件选项卡来修复它，然后在单击选项卡时插入代码以删除先前的滑块实例并为新选项卡创建一个新实例。
具体问题
我添加的 $(currentLocation).royalSlider('destroy') 行没有执行任何操作，而且我无法弄清楚自己在做什么错。 现在，滑块首次正确初始化，但是当我返回任何选项卡时，第一个滑块内将出现第二个滑块，这使我认为删除功能不起作用。它的尺寸较小，并且动画与滑块应设置为的动画不同(可能会反弹吗？)。这个数字永远不会超过两个。
代码
以下是我正在处理的代码片段。为了尊重开发人员，我仅提供了一些小部分内容(尽管很容易检查源代码)。首先是一些RoyalSlider.js，只是为了演示其结构和destroy方法(我根本没有更改它，并且采用了非常标准的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
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 */
}
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()，$mySlider.royalSlider('destroy')，$(pastLocation).destroy()，$(pastLocation).royalSlider('destroy')，$(pastLocation).royalSlider.prototype('destroy')，设置$('.royalslider).css('display','block')，然后再将其删除，还有其他我想出的办法；所有这些都不执行任何操作(在Firebug中逐步浏览时，我正在观看变量royalSlider)或破坏了网页。我是jQuery的新手，所以答案很可能很简单，而我只是想念它。任何帮助将不胜感激!
让我知道是否需要其他信息。
最佳答案
大多数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();
关于javascript - 无法使jQuery UI插件的destroy()方法正常工作(+冲突的jQuery插件)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11094243/