Javascript 动态更改rcarousel上的内容

我正在使用位于的“rcarousel–一个连续的jQuery UI转盘”。创建旋转木马后，我希望更改其中一个旋转木马窗格上的内容。我可以用下面的脚本很容易地更改内容：

$（'#carousel'）.find（'input.change'）。单击（function（）{$（this.parent（）.parent（）.find（'div.display'）.html（'newcontent'）；}）

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

一个实例位于，脚本包含在下面

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>

var active=true；
$（“#旋转木马”）.rcarousel(
{
可见:1,，
步骤：1，
宽度：780，
身高：240，
速度:500,，
起始页：2，
开始：函数（）{
var carousel=$（this），parent=carousel.parent（）；
$（'next slide'）。单击（函数（）{if（active）{carousel.rcarousel（“next”）；}）；
$（'prev slide'）。单击（函数（）{if（active）{carousel.rcarousel（“prev”）；}）；
对于（var i=0；i
向插件添加以下
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());
},

你能检查旋转木马的HTML并告诉我们
窗格
是否有任何
数据
属性引用了
内容
？如果你发现了，只需针对该数据属性并替换其中的内容。如果没有，那么你需要重新实例化插件。@Ohgodwhy。使用Firebug检查时，没有属性显示。但是，注意到HTML中只包含当前窗格。您建议如何检查HTML？谢谢