如何使用jsdifflib在动态div中显示结果

时间:2018-11-19 18:49:22

标签: javascript css jquery-ui

我正在使用jsdifflib(https://github.com/cemerick/jsdifflib#demo)在我的网页上进行文本比较。我正在尝试使用jquery-UI选项卡为每个比较结果获取单独的选项卡。这是工作。但是有一个大问题:

我对diff.js进行了以下代码更改,以将表输出成功获取到我的变量中:

来自diff.js的代码

function diffUsingJS(viewType) {
    "use strict";
    var byId = function (id) { return document.getElementById(id); },
        base = difflib.stringAsLines(byId("baseText").value),
        newtxt = difflib.stringAsLines(byId("newText").value),
        sm = new difflib.SequenceMatcher(base, newtxt),
        opcodes = sm.get_opcodes(),
        diffoutputResult,      //orig    diffoutput    new:textCmpTabs
        //contextSize = byId("contextSize").value;   //orig
        contextSize = null;

    diffoutputResult = diffview.buildView({
        baseTextLines: base,
        newTextLines: newtxt,
        opcodes: opcodes,
        baseTextName: "Base Text",
        newTextName: "New Text",
        contextSize: contextSize,
        viewType: viewType
    });
    return diffoutputResult;
}

我的jscript代码:

...
// Dynamic Tabs using jquery UI
function textCmpTabsAddTab(t,c) {
    var label = t,
        id = 'textCmpTabs-'+label,
        li = $( textCmpTabsTmpl.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
        tabContentHtml = c;

    textCmpTabs.find(".textCmpTabs").append(li);
    textCmpTabs.append( '<div id="' + id + '"><p>').append(tabContentHtml).append('</p></div>');
    textCmpTabs.tabs( "refresh" );
}
...
...
$( "#sidebyside" ).click(function() {
    var diffResult = diffUsingJS(0);
    textCmpTabsAddTab(k,diffResult);
    k += 1;
    }
);

问题:=== 但是所有表(差异结果)都显示在所有选项卡中。 diffview.js中似乎有一些“ document.createElement”命令正在整个文档上创建对象。我不确定如何,为什么或是否还有其他东西?

enter image description here

有人可以解释如何仅在自己的标签中获得每个比赛的结果(默认标签为空)吗?

谢谢。

0 个答案:

没有答案