0

在下面的脚本中，我想保持 htmlStrTOCpre 的初始值是静态的，这样它就不会改变。但是，一旦我编辑了文本区域，撤消将不再将原始文本粘贴回文本区域。我相信这是因为 htmlStrTOCpre 是基于调用 undoTOC 函数时 textarea 的 html() ，而不是页面加载时的初始值。

如何存储该初始值，以便始终将其粘贴回文本区域（通过 undoTOC 函数）？

<script>
jQuery(document).ready(function()
    {
        var pageurl = jQuery("#sample-permalink").text();
        var htmlStrTOCpre = jQuery("#cb2_customTOC").html();
        var htmlStrTOC  = '<h3>Table of Contents</h3>\n';
        htmlStrTOC += '<ul>\n';
        htmlStrTOC += '    <li><a href="'+pageurl+'">Introduction&nbsp;</a></li>\n';
        htmlStrTOC += '    <li><a href="'+pageurl+'2/">Introduction&nbsp;</a></li>\n';
        htmlStrTOC += '    <li><a href="'+pageurl+'3/">Conclusion&nbsp;</a></li>\n';
        htmlStrTOC += '</ul>';

        var checkTOC = function()
        {
            jQuery("#cb2_customTOC").html(htmlStrTOC);
        }

        jQuery("#cb-toc-click").bind("click", checkTOC);

        var undoTOC = function()
        {
            jQuery("#cb2_customTOC").html(htmlStrTOCpre);
        }

        jQuery("#cb-toc-undo").bind("click", undoTOC);

</script>

<div id="post_TOC" class="postbox ">
    <h3 class="hndle"><span>Table of Contents</span></h3>
    <div class="inside">
        <style>
        .cb-toc{color:blue;text-decoration:underline;cursor:pointer;}
        </style>
        <div class="inside">
            <textarea name="cb2_customTOC" id="cb2_customTOC">Some initial value</textarea>
            <span class="cb-toc" id="cb-toc-click">Paste TOC</span> | <span class="cb-toc" id="cb-toc-undo">Undo</span></p>
        </div>
    </div>
</div>

<span id="sample-permalink">http://localhost:8888/test/</span>
4

2 回答 2

3

使用.val()而不是.html()在文本区域上。然后将其存储在该.data()文本区域中。

保存：

$('#id').data('oldvalue',$('#id').val());

检索和重置：

$('#id').val($('#id').data('oldvalue'));

http://api.jquery.com/data/

于 2013-01-11T14:36:24.820 回答
1

在这里您会找到我的解决方案：http: //jsfiddle.net/EBqZy/，顺便说一句，我将在下面修改您的代码。

jQuery(document).ready(function()
{
    var pageurl = jQuery("#sample-permalink").text();
    var htmlStrTOCpre = jQuery("#cb2_customTOC").text();

    var htmlStrTOC  = '<h3>Table of Contents</h3>\n';
    htmlStrTOC += '<ul>\n';
    htmlStrTOC += '    <li><a href="'+pageurl+'">Introduction&nbsp;</a></li>\n';
    htmlStrTOC += '    <li><a href="'+pageurl+'2/">Introduction&nbsp;</a></li>\n';
    htmlStrTOC += '    <li><a href="'+pageurl+'3/">Conclusion&nbsp;</a></li>\n';
    htmlStrTOC += '</ul>';

    var checkTOC = function()
    {
        jQuery("#cb2_customTOC").val(htmlStrTOC);
    }

    jQuery("#cb-toc-click").bind("click", checkTOC);

    var undoTOC = function()
    {
        jQuery("#cb2_customTOC").val(htmlStrTOCpre);
    }

    jQuery("#cb-toc-undo").bind("click", undoTOC);

})


<div id="post_TOC" class="postbox ">
<h3 class="hndle"><span>Table of Contents</span></h3>
<div class="inside">
    <style>
    .cb-toc{color:blue;text-decoration:underline;cursor:pointer;}
    </style>
    <div class="inside">
        <textarea name="cb2_customTOC" id="cb2_customTOC">Default text</textarea>
        <span class="cb-toc" id="cb-toc-click">Paste TOC</span> | <span class="cb-toc" id="cb-toc-undo">Undo</span></p>
    </div>
</div>

http://localhost:8888/test/

于 2013-01-11T14:45:30.903 回答