Question

简短信息：
我正在开发基于websockets的聊天系统。对于设计，我使用jQuery UI选项卡。这些将用于在不同的聊天室和私人聊天聊天。在打开新房间或私人聊天时动态创建选项卡。这个想法是用户也可以关闭它们。

问题：
我完全有能力动态创建标签。但是当用户想要再次关闭它们时会出现问题。不知何故，我需要关闭按钮向标签删除功能发送正确的标签索引。如果用户当前选择了选项卡，则很容易获得索引。但是，如果用户在选择另一个选项卡时关闭选项卡，则不是那么多。那我怎么解决这个问题呢？

代码I到目前为止（简化）：

var tabs;
var tabCounter = 1;

$(document).ready(function() {
    tabs = $("#tabs").tabs();
    var ul = tabs.find("#tabs-ul");

    $("<li><a href='#newTab'>New Tab</a><a href='#' onclick=\"closeTab('"+id+"')\"><img class='imgCenter' src='layout/images/system/tabClose.png'></a></li>").appendTo(ul);
    $("<div id='newTab'>Name :<input type='text'></input></div>" ).appendTo(tabs);
    tabs.tabs("refresh");
});

function closeTabs(id){
    var getID = tabs.tabs('option', 'active');
    tabs.tabs("remove", getID);
}

正如您所看到的，我已经让它工作，以防选择标签。我已经使用id参数准备了closeTabs()函数，以便在关闭选项卡时不会尝试查找索引，而是在创建它时已经存在。我只是不知道该怎么做？

其他问题：
我怀疑当你删除其中一个时索引会发生变化。如果发生这种情况，我的想法会遇到一些严重的麻烦。是否可以防止索引发生变化？或者我必须使用完全不同的方法吗？

Answer 1

在弄清楚tabs("remove", id)被弃用之后，我很容易解决了我的问题。首先，我在选项卡列表中添加了一个数据属性：

<li data-user='uniqueID'>...</li>

接下来，我只是将我的closeTabs()功能更改为：

function closeTab(id){
    $("li[data-user='" + id + "']").remove();
    $("#"+id).remove();
    tabs.tabs( "refresh" );
}

问题解决了。像魅力一样工作！

删除未选择的动态jQuery ui选项卡

1 个答案: