Question

这是一个棘手的问题，我甚至不确定如何为此标题。

所以我有点混淆我有一个名为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>

royalSlider在一个名为'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看起来像这样我将此作为一种简短的摘要 - 当他们点击div时会加载slideonlyone函数来切换产品细节

  <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并且滑块放下其内容，如果我重新加载页面，它会再次拾取它们。所以它肯定是royalSlider需要重新加载一旦我必须重新加载div - 或者在我切换页面后重新加载页面。

Answer 1

好吧，如果你想再次运行'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);
      }
  });
  }

在另一个函数中重新加载jQuery函数

1 个答案: