Jquery ui 删除选项卡中的多个ace编辑器

我最终将使用nw.js制作一个IDE，因此内容和文件名将来自个人的PC，但这把小提琴复制了我将拥有的信息。如果您打开一个选项卡，然后用“x”按钮关闭它并检查控制台，您将看到它无法找到编辑器元素，但是如果您深入DOM，您将看到它就在那里。知道为什么去掉标签会爆炸吗？我想知道当用户想要关闭一个文件时如何清理

$.fn.addEditorTab=函数（名称、选项卡名称、内容）{
$（'ul'，this）.append（'li>'）；
$（此）。追加（“”）；
$（此）.tabs（“刷新”）；
var editor=ace.edit（“editor-”+名称）；
编辑：setTheme（“ace/theme/monokai”）；
editor.getSession（）.setMode（“ace/mode/javascript”）；
editor.getSession（）.setValue（内容）；
返回编辑器；
};
$（函数（）{
var tabs=$（“#tabs”）.tabs（）；
var编辑器={}；
var file1Path=“D:/Test/file1.js”；
var file1Name=“file1.js”；
var file1Contents=“函数foo（items）{\r var x=\”所有这些都是语法突出显示的\“；\r返回x；\r}”；
var file2Path=“D:/Test/file2.js”；
var file2Name=“file2.js”；
var file2Contents=“函数栏（项）{\r var x=\”所有这些都是语法突出显示的\“；\r返回x；\r}”；
编辑器[file1Path]=tabs.addEditorTab（file1Path、file1Name、File1Content）；
编辑器[file2Path]=tabs.addEditorTab（file2Path、file2Name、file2Contents）；
选项卡上（“单击”，“span.ui图标关闭”，函数（）{
var panelId=$（this.closest（“li”）.remove（）.attr（“aria控件”）；
var editorId=panelId.replace（“选项卡-”，“编辑器-”）；
控制台日志（“A”）；
$（“#”+editorId）.remove（）；
控制台日志（“B”）；
$（“#”+panelId）.remove（）；
控制台日志（“C”）；
编辑器[editorId.replace（“-editor”，”）].destroy（）；
控制台日志（“D”）；
制表符。制表符（“刷新”）；
});
});

问题在于选择器：

$（“#tab-D:/Test/file1.js”）

&

$（“#editor-D:/Test/file1.js”）

。将它们切换到不同的选择器会有所帮助

若要将任何元字符（如

！“$%&'（）*+，./：；？@[\]^{124;}

）用作名称的文字部分，必须使用两个反斜杠对其进行转义：

\

。例如，具有

id=“foo.bar”

的元素可以使用选择器

$（“\foo\.bar”）

。W3C CSS规范包含了完整的规范集。Mathias Bynens在上的博客条目也很有用

工作示例：

JavaScript

$.fn.addEditorTab = function(name, tabName, contents) {
  $('ul', this).append('<li><a href="#tab-' + name + '">' + tabName + '</a><span class="ui-icon ui-icon-close" role="presentation"></li>');
  $(this).append("<div id='tab-" + name + "'><div id='editor-" + name + "' class='editor'></div></div>");
  $(this).tabs("refresh");

  var editor = ace.edit("editor-" + name);
  editor.setTheme("ace/theme/monokai");
  editor.getSession().setMode("ace/mode/javascript");
  editor.getSession().setValue(contents);

  return editor;
};

$(function() {
  var tabs = $("#tabs").tabs();
  var editors = {};

  var file1Path = "D:/Test/file1.js";
  var file1Name = "file1.js";
  var file1Contents = "function foo(items) { \r var x = \"All this is syntax highlighted\";\r   return x;\r}";

  var file2Path = "D:/Test/file2.js";
  var file2Name = "file2.js";
  var file2Contents = "function bar(items) { \r var x = \"All this is syntax highlighted\";\r   return x;\r}";

  editors[file1Path] = tabs.addEditorTab(file1Path, file1Name, file1Contents);
  editors[file2Path] = tabs.addEditorTab(file2Path, file2Name, file2Contents);

  tabs.on("click", "span.ui-icon-close", function() {
    var panelId = $(this).closest("li").remove().attr("aria-controls");
    var editorId = panelId.replace("tab-", "editor-");

    console.log("A, Editor: " + editorId);
    $("div[id='" + editorId + "']").remove();

    console.log("B, Panel: " + panelId);
    $("div[id='" + panelId + "']").remove();

    console.log("C");
    editors[editorId.replace("editor-", "")].destroy();

    console.log("D");
    tabs.tabs("refresh");
  });
});

$.fn.addEditorTab=函数（名称、选项卡名称、内容）{
$（'ul'，this）.append（'li>'）；
$（此）。追加（“”）；
$（此）.tabs（“刷新”）；
var editor=ace.edit（“editor-”+名称）；
编辑：setTheme（“ace/theme/monokai”）；
editor.getSession（）.setMode（“ace/mode/javascript”）；
editor.getSession（）.setValue（内容）；
返回编辑器；
};
$（函数（）{
var tabs=$（“#tabs”）.tabs（）；
var编辑器={}；
var file1Path=“D:/Test/file1.js”；
var file1Name=“file1.js”；
var file1Contents=“函数foo（items）{\r var x=\”所有这些都是语法突出显示的\“；\r返回x；\r}”；
var file2Path=“D:/Test/file2.js”；
var file2Name=“file2.js”；
var file2Contents=“函数栏（项）{\r var x=\”所有这些都是语法突出显示的\“；\r返回x；\r}”；
编辑器[file1Path]=tabs.addEditorTab（file1Path、file1Name、File1Content）；
编辑器[file2Path]=tabs.addEditorTab（file2Path、file2Name、file2Contents）；
选项卡上（“单击”，“span.ui图标关闭”，函数（）{
var panelId=$（this.closest（“li”）.remove（）.attr（“aria控件”）；
var editorId=panelId.replace（“选项卡-”，“编辑器-”）；
console.log（“A，Editor:+editorId”）；
$（“div[id='”+editorId+“]]）；
控制台日志（“B，面板：+panelId”）；
$（“div[id='”+panelId+“']”）删除（）；
控制台日志（“C”）；
编辑器[editorId.replace（“editor-”，“”）].destroy（）；
控制台日志（“D”）；
制表符。制表符（“刷新”）；
});
});

还应用了

编辑器[editorId.replace（“-editor”，”）]的修复程序。destroy（）；

---

希望这能有所帮助。

伙计，添加了关闭代码和一个小提琴，结果被否决了。有时我就是不明白。当我查看小提琴时，我看到你加载了jQuery 2.0.2，外部调用了jQuery 3.2.1。我在控制台中也看到了一些错误。我会先修复你的小提琴。另外，

编辑器[editorId.replace（“-editor”，”）]。destroy（）；

将无法替换任何内容。因为此时

editorId

应该是

editor-D:/Test/file1.js

。字符串

-editor

将不存在。因此索引将不存在。进一步测试，我看到错误：

错误：语法错误，无法识别的表达式：#editor-D:/Test/file1.js是否知道间接完成与指定div[id=]相比，选择器不起作用？这很有效，谢谢您。因此，如果像div[id=]一样使用，则不必对其进行转义更新。文件名很复杂。我尝试通过添加转义来进行测试，以便它使用
var file1Path=“D\\：\\\/Test\\\/file1\\\.js";，但当用作选择器时，这并没有转换。内部使用单引号似乎有助于更好地逃避或匹配。就我个人而言，我会使用一个简单得多的ID，如
file-1
，并将路径和名称存储为
data
属性。@user441521这可能会有所帮助：将所有文件详细信息存储在一个对象中，并创建更易于管理的ID。感谢您的帮助。这是一个测试，在我真正的nw.js应用程序中，他们通过dbl单击树视图中磁盘上文件的表示来启动一个文件。我不需要把它们放在任何容器里，但谢谢分享。我现在必须为所有这些找到一个好的布局。@user441521我怀疑可能是这样，所以我想分享改进后的小提琴。
$.fn.addEditorTab = function(name, tabName, contents) {
  $('ul', this).append('<li><a href="#tab-' + name + '">' + tabName + '</a><span class="ui-icon ui-icon-close" role="presentation"></li>');
  $(this).append("<div id='tab-" + name + "'><div id='editor-" + name + "' class='editor'></div></div>");
  $(this).tabs("refresh");

  var editor = ace.edit("editor-" + name);
  editor.setTheme("ace/theme/monokai");
  editor.getSession().setMode("ace/mode/javascript");
  editor.getSession().setValue(contents);

  return editor;
};

$(function() {
  var tabs = $("#tabs").tabs();
  var editors = {};

  var file1Path = "D:/Test/file1.js";
  var file1Name = "file1.js";
  var file1Contents = "function foo(items) { \r var x = \"All this is syntax highlighted\";\r   return x;\r}";

  var file2Path = "D:/Test/file2.js";
  var file2Name = "file2.js";
  var file2Contents = "function bar(items) { \r var x = \"All this is syntax highlighted\";\r   return x;\r}";

  editors[file1Path] = tabs.addEditorTab(file1Path, file1Name, file1Contents);
  editors[file2Path] = tabs.addEditorTab(file2Path, file2Name, file2Contents);

  tabs.on("click", "span.ui-icon-close", function() {
    var panelId = $(this).closest("li").remove().attr("aria-controls");
    var editorId = panelId.replace("tab-", "editor-");

    console.log("A, Editor: " + editorId);
    $("div[id='" + editorId + "']").remove();

    console.log("B, Panel: " + panelId);
    $("div[id='" + panelId + "']").remove();

    console.log("C");
    editors[editorId.replace("editor-", "")].destroy();

    console.log("D");
    tabs.tabs("refresh");
  });
});