在另一個函數中重新加載jQuery函數

Question

這是一個棘手的問題，我甚至不確定如何為此標題。

所以我有一點混合我有一個名為slideonlyone的jQuery函數，切換div和divs內我有一個名為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時，royalSlider將需要重新加載，以便它再次找到ID？

當我從我的slidonlyone函數中切換/滑動一些內容時，是否可以重新加載royalSlider函數？

注意：如果我切換div並且滑塊丟棄其內容，如果我重新加載頁面，它會再次拾取它們。 所以它肯定是royalSlider需要重新加載一旦我有toggeld 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 個解決方案

解決方案1
2 已采納 2013-01-28 13:47:29

在另一個函數中重新加載jQuery函數

問題描述

1 個解決方案

解決方案1 2 已采納 2013-01-28 13:47:29

解決方案1
2 已采納 2013-01-28 13:47:29