0

这是一个棘手的问题，我什至不知道如何为它命名。

所以我所拥有的有点混乱，我有一个名为 slideonlyone 的 jQuery 函数，它可以切换 div，在 div 中我有一个名为 royalSlider（内容滑块）的 jQuery 插件。

发生的情况是，当我第一次加载页面时，默认情况下我没有切换一个 div，并且 royalSlider 插件工作正常。当我使用 RoyalSlider 插件将页面切换到另一个 div 时，它无法加载该插件。

我的页面的头部看起来像这样：

  <head>
    <link rel="stylesheet" href="/css/system.css" type="text/css">
    <link rel="stylesheet" href="/css/royalslider.css" type="text/css">
    <link rel="stylesheet" href="/css/default/rs-default-inverted.css" type="text/css">
    <script src="/js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="/js/jquery.royalslider.js" type="text/javascript"></script>
    <script src="/js/systems_jquery.js" type="text/javascript"></script>

      <script type="text/javascript">
        function slideonlyone(thechosenone) {
        $('.systems_detail').each(function(index) {
        if ($(this).attr("id") == thechosenone) {
             $(this).slideDown(200);
        }
        else {
             $(this).slideUp(600);
        }
   });
  }
  </script>
</head>

皇家滑块在我加载的名为“systems_jquery.js”的单独文件中调用

 jQuery(document).ready(function($) {
  var rsi = $('#slider-in-laptop').royalSlider({
    autoHeight: false,
    arrowsNav: false,
    fadeinLoadedSlide: false,
    controlNavigationSpacing: 0,
    controlNavigation: 'bullets',
    imageScaleMode: 'fill',
    imageAlignCenter: true,
    loop: false,
    loopRewind: false,
    numImagesToPreload: 6,
    keyboardNavEnabled: true,
    autoScaleSlider: true,  
    autoScaleSliderWidth: 486,     
    autoScaleSliderHeight: 315
  }).data('royalSlider');
  $('#slider-next').click(function() {
    rsi.next();
  });
  $('#slider-prev').click(function() {
    rsi.prev();
  });
 });

html 看起来像这样

  <a href="javascript:slideonlyone('beagle_box');">
    <div class="system_box">
      <h2>BEE management systems</h2>
      <p>________________</p>
    </div>
  </a>

这是产品详细信息 div。

<div class="systems_detail" id="sms_box">
  <div class="laptopBg">
    <img src="/images/laptop.png" class="imgBg" width="707" height="400">
    <div id="slider-in-laptop" class="royalSlider rsDefaultInv">
      <img src="/images/1.jpg">
      <img src="/images/2.jpg" data-rsvideo="https://vimeo.com/45778774">
      <img src="/images/3.jpg">
      <img src="/images/4.jpg">
    </div>
  </div>
</div>

正如您所看到的，除了显示产品屏幕截图的 RoyalSlider 之外，还有其他细节。但由于它只是刚刚出现，因此图像没有加载到滑块中，并且图像在彼此下方显示，就好像插件坏了但是当我检查元素并转到控制台时，我可以看到它没有坏。所以我怀疑当我切换 div 以便它再次找到 ID 时，royalSlider 将需要重新加载？

当我从我的 slidonlyone 功能切换/滑动某些内容时，是否可以重新加载 RoyalSlider 功能？

注意：如果我切换 div 并且如果我重新加载页面，滑块会丢弃其内容，它会再次拾取它们。因此，一旦我切换了 div，它肯定需要重新加载royalSlider——或者一旦我切换了页面，就需要重新加载页面。

4

1 回答 1

2

好吧，如果您想再次运行“royalSlider”，而不仅仅是将整个东西包装在一个函数中。然后在您认为需要重新加载它的时候运行它（'documentReady' 或 'click' 等）：

royalSliderReload = function() {

    var rsi = $('#slider-in-laptop').royalSlider({
            autoHeight: false,
            arrowsNav: false,
            fadeinLoadedSlide: false,
            controlNavigationSpacing: 0,
            controlNavigation: 'bullets',
            imageScaleMode: 'fill',
            imageAlignCenter: true,
            loop: false,
            loopRewind: false,
            numImagesToPreload: 6,
            keyboardNavEnabled: true,
            autoScaleSlider: true,  
            autoScaleSliderWidth: 486,     
            autoScaleSliderHeight: 315
    }).data('royalSlider');

    $('#slider-next').click(function() {
        rsi.next();
    });

    $('#slider-prev').click(function() {
        rsi.prev();
    }); 
}


$(document).ready(function(e) {
    royalSliderReload(); 
});


function slideonlyone(thechosenone) {
  $('.systems_detail').each(function (index) {
      if ($(this).attr("id") == thechosenone) {
          $(this).slideDown(200);
          royalSliderReload(); // slider will reload here
      } else {
          $(this).slideUp(600);
      }
  });
  }
于 2013-01-28T13:47:29.427 回答