Question

好的，所以我有一个标签式界面，一旦点击链接就会动态添加标签，并使用ajax填充新生成的标签。该部分工作正常，但我需要扩展功能，以允许动态创建的选项卡在同一次单击期间也分配给它们的类。我目前的代码如下：

$(document).ready(function() {
    var tabs = $("#tabs").tabs();
    $(".tabButton").live("click", function(){
        var getTopicID = $('.topicID',$(this).parent()).val();
        tabs.tabs('add', 'ajax.php?section=summary&id=' + getTopicID, 'Summary');
        tabs.tabs('add', 'ajax.php?section=read&id=' + getTopicID, 'Read Topic');
    });
});

此代码可以很好地添加选项卡。但是，我不确定如何添加课程。我已经尝试在第二个tabs.tabs行之后直接放置以下内容，但无济于事：

$(this).addClass('testClass');

主要问题是生成的选项卡的id为＃ui-tabs- *，其中*是偶数形式的自动递增值。我应该指出，分配类的原因是它们可以在以后被销毁。我也考虑过使用各个函数，但我不确定这是否是最好的方法？

道歉，如果这看起来有点愚蠢，jQuery并不是我的强项。

修改

好的，接下来根据Bumble的建议，我添加了一些功能，即使用相同的onclick事件删除任何以前创建的标签：

$(document).ready(function() {
    var tabs = $("#tabs").tabs();
    $(".tabButton").live("click", function(){
        $(\'div[id*="ui-tabs-"]\').each(function(index) {
            if($(this).hasClass(\'testClass\'))
            $("#tabs").tabs("remove", \'.testClass\');
        });
        var getTopicID = $(\'.topicID\',$(this).parent()).val();
        tabs.tabs(\'add\', \'ajax.php?section=summary&id=\' + getTopicID, \'Summary\');
        tabs.tabs(\'add\', \'ajax.php?section=read&id=\' + getTopicID, \'Read Topic\');
        $(\'div[id*="ui-tabs-"]\').each(function(index) {
            if(!$(this).hasClass(\'testClass\'))
            $(this).addClass(\'testClass\');
        });
    });
});

现在这段代码在某种程度上有效。 UI有一个持久性选项卡（包含onclick链接的主选项卡），然后是由所述链接生成的两个选项卡。但是，上面的代码删除了持久性选项卡，并保留了两个生成的选项卡！有什么想法吗？

进一步编辑

好的，所以在查看文档后，您必须提供删除功能，并删除选项卡索引，您无法根据类名删除选项卡。因此，remove函数必须首先获取选项卡的索引（如果它具有testClass类），然后将其删除。我读得对吗？

Answer 1

您可以使用通配符选择所有生成的标签然后循环，检查他们是否有课程：

$(document).ready(function() {
    var tabs = $("#tabs").tabs();
    $(".tabButton").live("click", function(){
        var getTopicID = $('.topicID',$(this).parent()).val();
        tabs.tabs('add', 'ajax.php?section=summary&id=' + getTopicID, 'Summary');
        tabs.tabs('add', 'ajax.php?section=read&id=' + getTopicID, 'Read Topic');
        $('div[id*="ui-tabs-"]').each(function(index) {
            if($(this).hasClass('testClass'))
                $(this).remove();
            else
                $(this).addClass('testClass');
        });
    });
});

Answer 2

我完全忘了关闭它。我最终得到了以下内容：

var tabs = $("#tabs").tabs({ spinner: 'Retrieving data...' });
$(".tabButton").live("click", function(){
    var getTopicID = $('.topicID',$(this).parent()).val();
            $("#tabs").tabs("remove",1);
            $("#tabs").tabs("remove",1);
    tabs.tabs('add', 'ajax.php?section=summary&id=' + getTopicID, 'Summary');
    tabs.tabs('add', 'ajax.php?section=read&id=' + getTopicID, 'Read Topic');
});

tabsremove函数删除索引为1的选项卡，删除第一个选项卡后，第二个选项卡的索引为1，从而删除两者。

循环通过动态生成的jQuery选项卡并添加类

2 个答案: