Javascript Can'；t使jQuery UI插件的destroy（）方法正常工作（+；冲突的jQuery插件） 背景/一般问题
我正试图修复一个朋友的网站，其中他添加的两个jQuery插件不太好用。基本上，一个（-带选项卡的网格布局）与第二个（-图像滑块）的效果不好，因为后者需要“查看”滑块材质，而前者隐藏不活动的选项卡。该页面有三个选项卡，每个选项卡上都有一个滑块 原始代码在主页上的一些jQuery中立即初始化了三个选项卡中的每个选项卡的滑块。我一直试图通过只初始化活动选项卡来修复它，然后在单击选项卡时插入代码来删除以前的滑块实例，并为新选项卡创建一个新实例 具体问题 我添加的Javascript Can'；t使jQuery UI插件的destroy（）方法正常工作（+；冲突的jQuery插件） 背景/一般问题,javascript,jquery,jquery-plugins,slideshow,Javascript,Jquery,Jquery Plugins,Slideshow,我正试图修复一个朋友的网站，其中他添加的两个jQuery插件不太好用。基本上，一个（-带选项卡的网格布局）与第二个（-图像滑块）的效果不好，因为后者需要“查看”滑块材质，而前者隐藏不活动的选项卡。该页面有三个选项卡，每个选项卡上都有一个滑块 原始代码在主页上的一些jQuery中立即初始化了三个选项卡中的每个选项卡的滑块。我一直试图通过只初始化活动选项卡来修复它，然后在单击选项卡时插入代码来删除以前的滑块实例，并为新选项卡创建一个新实例 具体问题 我添加的$（currentLocation）.ro
$（currentLocation）.royalSlider（'destroy'）(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);
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><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 -->
。。。
var$mySlider；
$（文档）.ready（函数（）{
如果（window.location.hash）{initialLocation=window.location.hash+'Tab'；}
else{initialLocation='#taboneTab'}
$mySlider=$（初始位置）({
字幕显示效果：“向左移动”，
方向NavAutoHide:true，
imageScaleMode：“适合”，
imageAlignCenter：对，
blockLinksOnDrag:true，
});
$（“.royalSlider”）.css（{display:'inline block'，overflow:'hidden'}）；
});
...
...
-
...
-
内容一
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利
-
构造原型
-
...
-
...
我真的很抱歉所有的文字和缺乏完整的代码，但有人有任何建议吗？我试过
$mySlider.destroy（）$mySlider.royalSlider（'destroy'）$（pastLocation）.destroy（），$（pastLocation）），$（pastLocation'），$（pastLocation'）。royalSlider.prototype（'destroy'）
，设置$（'royalSlider.css'），'display'，'block'）
，然后删除它，还有其他我能想到的东西；所有这些人要么什么也没做（我在Firebug中查看变量royalSlider），要么破坏了网页。我是jQuery的新手，所以答案很可能很简单，我只是错过了它
任何帮助都将不胜感激
如果需要其他信息，请告诉我。大多数jQuery插件将其对象的新实例存储在jQuery数据中。我在我认为的royal slider代码上达到了顶峰——我认为直接引用royal slider对象可以破坏它
首先，您需要检查并查看您试图调用destroy的元素是否实际具有royalSlider实例
console.log($(prevLocation).data('royalSlider'));
$(prevLocation).data('royalSlider').destroy();
假设上面的行返回一个对象，那么您应该能够直接访问destroy方法。如果它没有返回一个对象，那么要么是对错误的元素调用了destroy，要么是其他东西将存储的实例吹走了
console.log($(prevLocation).data('royalSlider'));
$(prevLocation).data('royalSlider').destroy();
我在royalSlider网站上测试了这一点，在我的控制台中键入以下内容
$('#homeSlider').data('royalSlider').destroy();
有趣的是我和基金会有同样的问题。有没有解决过这个问题？我曾经尝试过在插件主页的一些示例上销毁/重新创建实例，但在我看来，“销毁”方法并没有得到很好的实现。既然你必须为它付费，你应该直接向插件作者投诉。为什么不重命名其中一个插件的销毁方法呢？你可以用你的IDE替换所有的。你能做一个JSFIDLE吗？