Question

我正在尝试使用jquery的.data来缓存选项卡内容，这样当选项卡上的单击事件时，内容将从外部页面中提取，显示在选项卡内容区域中，并在.data中“缓存”。（键，值）对。在随后单击选项卡时，应从.data中提取内容，而不是从外部页面重新提取内容。但是，使用.data缓存似乎并没有发生。

我或多或少地从教程中蚕食了以下代码，并根据我的需要进行了调整。这里的教程：http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/

这是我的HTML：

<div id="tabs"> 
    <ul> 
        <li id = "idee1"><a href="/test2.php">see test2</a></li>
        <li id = "idee2" class="selected"><a href="/test3.php">see test3</a></li>
        <li id = "idee3"><a href="/test4.php">see test4</a></li>
        <li id = "idee4"><a href="/test5.php">see test5</a></li>
    </ul>
</div>
<div id="tabcontents">
    Some initial content.
</div>

这是我的jquery：

$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

    $('#tabs a').click(function(e){
        var element = $(this);

        /*if click on currently selected tab do nothing*/
        if(element.parent('.selected').length) {
             return false;
        }

        /*remove "selected" class from previously selected tab*/
        $("#tabs").find("li.selected").removeClass("selected");

        /*update the class of the currently selected tab to "selected"*/
        element.parent().addClass( "selected" );

        /* If no cache is present for the tab, show the gif preloader and run an AJAX request: */
        if(!element.data('cache')) {    

            /*show the preloader image*/
            $('#tabcontent').html('<img src="images/preloader/preloader.gif" width="124" height="128" />');

            /*get call to external page, add external page content to tabcontent div and add it to the .data cache*/
            $.get( this.href, function( msg ) {
                $( "#tabcontent" ).html( msg );
                element.data('cache', msg);
            });
        }

        /*if there is a .data cache for the tab, use it*/
        else {
            $('#tabcontent').html(element.data('cache'));
        }

        e.preventDefault();
    });

点击每个标签后，我会看到preloader.gif图片，这让我相信没有发生缓存。

在进行测试时，我还尝试了以下get请求：

$.get( this.href, function( msg ) {
    element.data('cache', msg);
});

$( "#tabframe" ).html("<b>Hi guys</b>");

这样做的结果是，在单击选项卡（＃idee1）时，通用的“Hi guys”消息会按预期显示。单击第二个选项卡（＃idee2）然后返回以单击最初单击的选项卡（＃idee1）后，缓存的数据将按预期显示。但是，如果我再点击第二个选项卡（＃idee2），则无法找到该选项卡的缓存数据，并再次显示通用的“Hi guys”消息。就像显示缓存数据一样，所有缓存数据都会消失，循环必须从头开始。

我还尝试使用element.parent().data('cache', msg);，认为将数据添加到具有特定ID的父li会以某种方式保持每个元素的.data与其他元素“更加分离”，但没有看到任何区别。

非常感谢任何和所有帮助/想法。

jquery .data问题（检索后没有缓存和值消失）

0 个答案: