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

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

javascript jquery function

Javascript 在另一个函数中重新加载jQuery函数,javascript,jquery,function,reload,Javascript,Jquery,Function,Reload,这是一个棘手的问题，我甚至不知道如何用词来称呼它所以我有一点混乱，我有一个jQuery函数叫做slideonlyone，它可以切换div，在div中我有一个jQuery插件叫做royalSlider（内容滑块）当我第一次加载页面时，默认情况下会取消一个div的切换，royalSlider插件工作正常。当我使用royalSlider插件将页面切换到另一个div时，它无法加载该插件我的页面标题如下所示： <head> <link rel="stylesheet"

这是一个棘手的问题，我甚至不知道如何用词来称呼它

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

当我第一次加载页面时，默认情况下会取消一个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>

html如下所示我把它作为一种简短的总结——当他们点击div时，加载slideonyOne函数，该函数切换产品的详细信息

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

这是产品详细信息部门

<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>

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

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

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

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

你能提供js fiddle吗..文件中的内容太多了，我只是剪了一些来显示基本内容SSO是systems_jquery.js，其中“documentReady”是什么？请尝试在正文末尾之前移动此行“”。看起来您的脚本试图在html之前运行。也许这是你的问题！？不，我只是试过，我认为royalSlider在simular元素上运行多次会出现问题？？但谢谢我投票支持你，因为你的作品：DAnytime。如果此royalSlider导致问题，请尝试其他方法。刚刚发现royalSlider正在运行accross ID，因此它将ping第一个并跳过其他。我需要它来检查很多身份证。。我会设法弄明白怎么做，但不管怎样你都会摇滚

<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>

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);
      }
  });
  }