动态更改rcarousel上的内容

我正在使用位于http://ryrych.github.io/rcarousel/的“rcarousel - 连续的jQuery UI轮播”。创建旋转木马后，我希望更改其中一个旋转木马窗格的内容。我可以使用以下脚本轻松地更改内容：$('#carousel').find('input.change').click(function(){$(this).parent().parent().find('div.display').html('New content');});动态更改rcarousel上的内容

问题是如果转到另一个窗格，然后返回，“已更改”窗格将恢复为其原始内容。

现场示例位于http://tapmeister.com/test/ryrych-rcarousel/examples/dynamic.php，脚本包含在下面。

var active=true; 

$("#carousel").rcarousel(
    { 
     visible: 1, 
     step: 1, 
     width: 780, 
     height: 240, 
     speed: 500, 
     startAtPage: 2, 
     start: function() { 
      var carousel=$(this),parent=carousel.parent(); 
      $('#next-slide').click(function(){if(active) {carousel.rcarousel("next");}}); 
      $('#prev-slide').click(function(){if(active) {carousel.rcarousel("prev");}}); 

      for (var i = 0; i < carousel.rcarousel("getTotalPages"); i++) { 
       $("<a />",{href:'#','class':'carousel-bullet off'}) 
       .bind("click", {page: i}, 
        function(event) { 
         if(active) { 
          carousel.rcarousel("goToPage", event.data.page); 
          event.preventDefault(); 
         } 
        } 
       ) 
       .appendTo("#carousel-pages"); 
      } 

      // mark first page as active 
      $("a:eq(0)", "#carousel-pages") 
      .removeClass("off") 
      .addClass("on") 
      .css("background-image", "url(images/page-on.png)"); 

      $("#next-slide, #prev-slide, .carousel-bullet") 
      .hover(
       function(){ 
        if(active){$(this).css("opacity", 0.7);} 
       }, 
       function(){ 
        if(active){$(this).css("opacity", 1.0);} 
       } 
      ); 

     }, 
     pageLoaded: function(event, data) { 
      $("a.on", "#carousel-pages") 
      .removeClass("on") 
      .css("background-image", "url(images/page-off.png)"); 

      $("a", "#carousel-pages") 
      .eq(data.page) 
      .addClass("on") 
      .css("background-image", "url(images/page-on.png)"); 
     } 

    } 
); 

<div id="carousel-container"> 
    <div id="carousel"> 

     <div class="slide"> 
      <div class="sub-slide"> 
       <img src="images/throbber.gif" class="throbber" alt="Please Wait" /> 
       <div class="display">Display 0</div> 
      </div> 
      <div class="buttons"> 
       <input class="change" type="button" value="change"> 
      </div> 
     </div> 
     <div class="slide"> 
      <div class="sub-slide"> 
       <img src="images/throbber.gif" class="throbber" alt="Please Wait" /> 
       <div class="display">Display 1</div> 
      </div> 
      <div class="buttons"> 
       <input class="change" type="button" value="change"> 
      </div> 
     </div> 
     <div class="slide"> 
      <div class="sub-slide"> 
       <img src="images/throbber.gif" class="throbber" alt="Please Wait" /> 
       <div class="display">Display 2</div> 
      </div> 
      <div class="buttons"> 
       <input class="change" type="button" value="change"> 
      </div> 
     </div> 
     <div class="slide"> 
      <div class="sub-slide"> 
       <img src="images/throbber.gif" class="throbber" alt="Please Wait" /> 
       <div class="display">Display 3</div> 
      </div> 
      <div class="buttons"> 
       <input class="change" type="button" value="change"> 
      </div> 
     </div> 
     <div class="slide"> 
      <div class="sub-slide"> 
       <img src="images/throbber.gif" class="throbber" alt="Please Wait" /> 
       <div class="display">Display 4</div> 
      </div> 
      <div class="buttons"> 
       <input class="change" type="button" value="change"> 
      </div> 
     </div> 
     <div class="slide"> 
      <div class="sub-slide"> 
       <img src="images/throbber.gif" class="throbber" alt="Please Wait" /> 
       <div class="display">Display 5</div> 
      </div> 
      <div class="buttons"> 
       <input class="change" type="button" value="change"> 
      </div> 
     </div> 

    </div> 
    <a href="#" id="next-slide" class="change-slide"></a> 
    <a href="#" id="prev-slide" class="change-slide"></a> 
    <div id="carousel-pages"></div> 
</div>

来源

2013-05-13 user1032531

您可以检查转盘的HTML，并告诉我们，如果'pane'有持有参考'的'任何数据'属性content'？如果你发现它，只需定位该数据属性并替换其中的内容即可。如果没有，那么你需要重新实例化插件。 – Ohgodwhy 2013-05-13 18:24:38

@Ohgodwhy。使用Firebug进行检查时，不显示任何属性。但是，注意到只有当前窗格包含在HTML中。你会如何建议检查HTML？谢谢 – user1032531 2013-05-13 19:03:06

以下updatePageDOM()方法添加到插件

updatePageDOM: function() { 
    var $root = $(this.element), 
    data=$root.data("data"); 
    //Note that data.paths[data.pageIndex] and data.pages[data.pageIndex][0] is the same 
    data.paths[data.pageIndex].html($root.find('div.slide').html()); 
},

来源

2013-05-14 12:40:05 user1032531

动态更改rcarousel上的内容

回答

相关问题