个人中心
gpt4 book ai didi

javascript - 无法使用 jQuery UI 插件的 destroy() 方法(+冲突的 jQuery 插件)

转载 作者：搜寻专家 更新时间：2023-11-01 04:38:23 26 4
gpt4 key购买 nike

背景/一般问题

我正在尝试修复一个 friend 的网站，他添加的两个 jQuery 插件在其中运行不佳。基本上，一个(foundation - 带选项卡的网格布局)与第二个(RoyalSlider - 图像 slider )配合得不好，因为后者需要“查看” slider Material ，而前者隐藏非事件选项卡。有问题的页面有三个选项卡，每个选项卡上都有这些 RoyalSliders 之一。

原始代码在主页上的某些 jQuery 中立即为三个选项卡中的每一个选项卡初始化了 slider 。我一直在尝试通过仅初始化事件选项卡来修复它，然后在单击选项卡时插入代码以删除先前的 slider 实例并为新选项卡创建一个新 slider 实例。

具体问题

$(currentLocation).royalSlider('destroy') 我添加的行没有做任何事情，我不知道是什么我做错了。现在， slider 第一次正确初始化，但当我返回任何选项卡时，第二个 slider 出现在第一个 slider 内，让我觉得删除功能不是在职的;它的尺寸更小并且动画与 slider 应该设置的不同(可能反弹？)。这个数字永远不会超过两个。

代码

以下是我正在处理的一些代码片段。出于对开发人员的尊重，我只包含了小部分(尽管检查源代码很容易)。首先是一些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(), $mySlider.royalSlider('destroy'), $(pastLocation).destroy() , $(pastLocation).royalSlider('destroy'), $(pastLocation).royalSlider.prototype('destroy'), 设置$('.royalslider ).css('display','block') 就在删除它之前，以及我能想到的任何其他东西；所有这些要么什么都不做(我在 Firebug 中单步执行它时正在观察变量 royalSlider)，要么破坏了网页。我是 jQuery 的新手，所以答案很可能非常简单，而我只是想念它。

如有任何帮助，我们将不胜感激!

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

最佳答案

大多数 jQuery 插件将其对象的新实例存储在 jQuery 数据中。我在我认为是皇家 slider 代码的地方达到了顶峰 - 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/

26 4 0
文章推荐： ios - 如何制作无限的 UIScrollView？
文章推荐： ios - 由于未捕获的异常 'CALayerInvalidGeometry' 而终止应用程序，原因 : 'CALayer position contains NaN
文章推荐： ios - Xcode 6 错误 - 为 iOS 模拟器构建时出现 "Missing Required Architecture i386"
文章推荐： Javascript 意外结果
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com